okay i worked it out now but anyway heres the code so far:
<!doctype html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=windows-1252">
<title> </title>
<script>
var b = document.getElementById( 'b' );
var p = document.getElementById( 'p' );
b.addEventListener( 'click',function(){
characterProfile();
});
function getGenderFromRadio(){
var radio_gender = document.getElementsByName( 'gender' );
for( var i=0; i<radio_gender.length; i++ ){
if( radio_gender[i].checked ){
return radio_gender[i].value;
}
}
return 'unknown';
}
function characterProfile()
p.innerHTML="<pre><h2>Character Profile<\/h2><\/pre>"
+ "<pre><p>Gender: "
+ getGenderFromRadio()
+ "<\/p><\/pre>";
}
function credit()
{
document.body.innerHTML+="<pre><h3>These people helped me alot:<\/h3><br><br><a href='http://www.dynamicdrive.com/forums/'>Dynamic Drive<\/a><\/pre>"
}
function craft()
{
document.body.innerHTML="<pre><p>What do you want to craft?<\/p><button onClick='newWorld()'>Back<\/button><\/pre>"
}
function explore()
{
document.body.innerHTML="<pre><h1>Where do you want to explore?<\/h1><button onClick='newWorld()'>Back<\/button><br><button onClick='exploreNorth()'>North<\/button><\/pre>"
}
<!--Below are the explore() functions
function exploreNorth()
{
var found='a branch'
document.body.innerHTML="<pre><h4>You walk towards north and find "+found+"<\/h4><br><button onClick='explore()'>Back<\/button><\/pre>"
}
function myInventory1()
{
document.body.innerHTML="<pre>You came from first inventory item <button onClick='newWorld()'>Back<\/button><\/pre>"
}
function myInventory2()
{
document.body.innerHTML="<pre>You came from second inventory item <button onClick='newWorld()'>Back<\/button><\/pre>"
}
function myInventory3()
{
document.body.innerHTML="<pre>You came from third inventory item <button onClick='newWorld()'>Back<\/button><\/pre>"
}
function showInventory()
{
document.getElementById('inventory').style.display='block';
document.getElementById('hide_list').style.display='inline'
}
function hideInventory()
{
document.getElementById('inventory').style.display='none';
document.getElementById('hide_list').style.display='none'
}
function newWorld()
{
document.body.innerHTML="<pre><h1>Hello and welcome to World of My Core!<\/h1>What would you like to do?<br><button style='width:145px' onClick='window.location.reload()'>Exit<\/button><br><button onClick='showInventory()' style='display: inline; width: 145px'>Show Inventory Items<\/button> <button id='hide_list' style='display: none' onclick='hideInventory()'>Hide Inventory<\/button><ul id='inventory' style='margin-top: 10px; margin-bottom: 0px; display: none'><li onclick='myInventory1()'>first item<\/li><li onclick='myInventory2()'>second item<\/li><li onclick='myInventory3()'>third item<\/li><\/ul><br><button onClick='craft()' style='width:145px'>Craft<\/button><br><button onClick='explore()' style='width:145px'>Explore<\/button><br><button style='width:145px' onClick='characterProfile()'>Profile<\/button><\/pre>"
}
function charCreate()
{
document.body.innerHTML="<pre><h3>Start by choosing your name!<\/h3><br><br><input type='text' name='name'><br><br><input type='radio' name='gender' value='Male'>Male<br><input type='radio' name='gender' value='Female'>Female<br><br><button onClick='newWorld()'>New World<\/button><pre>"
}
</script>
<style>
pre{font-family: verdana; font-size: 12px}
button {font-family: arial; font-size: 13px}
button,li{cursor: pointer}
</style>
</head>
<h1 style="color:brown">MY CORE</h1>
<button onClick="charCreate()">Play</button><br>
<button onClick="credit()">Credits</button>
</body>
</html>