Element help

**NitroDev** · 11-11-2013, 02:22 PM

Hi! I want to get these input names:

Code:

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>"
}

to here:

Code:

function characterProfile()
{
document.body.innerHTML="<pre><h2>Character Profile<\/h2><\/pre>"
document.body.innerHTML+="<pre><p>Gender: <\/p><\/pre>"
}

every answer is welcome!

**traq** · 11-12-2013, 01:17 AM

Do you mean you want the value of the checked button?

Code:

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';
}

**NitroDev** · 11-12-2013, 12:27 PM

Yes but in my game code that doesn't seem to work

Code:

<!doctype html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=windows-1252">
<title>&nbsp;</title>

<script>
function characterProfile()
{
    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 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>&nbsp;<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>

**traq** · 11-12-2013, 07:55 PM

I… don't see where you're trying to use it. You seem to have replaced your entire characterProfile function with the contents of my getGenderFromRadio function.

example usage

**NitroDev** · 11-13-2013, 11:37 AM

Correct so what should i do then? Like this?

Code:

function characterProfile()
{
    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;
        }
    }
document.body.innerHTML+="<pre><p>Gender: "+radio_gender+"<\/p><\/pre>
}

**traq** · 11-14-2013, 01:50 AM

No, you shouldn't be replacing your original function at all. Simply add a call to the new function at the spot you want the gender term inserted.

Look at, and experiment with, the working example I offered.

**NitroDev** · 11-14-2013, 03:28 PM

umm like this?

Code:

function characterProfile(){
{
document.body.innerHTML="<pre><h2>Profile<\/h2><\/pre>"
    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';

document.body.innerHTML+="<pre><p>Gender: "+radio_gender+"<\/p><\/pre>"
}

**traq** · 11-14-2013, 07:52 PM

Did you try that? Did it do what you wanted?

Did you look at the working example I set up for you?

**NitroDev** · 11-15-2013, 05:33 PM

Yes but i wanted to NOT have the button just to instantly show that Gender: Male/Female

**traq** · 11-15-2013, 05:58 PM

That's fine — you don't have to. It's an example so you could see how to integrate the getGender... function with your existing createProfile function. You can call the createProfile function however you like, it's up to you. Look at the code before dismissing it. Almost all of your code could remain unchanged —do you see where I added the call to my new function, at the bottom of your existing function? That's all there is to it.

Code:

var characterProfile = function(){
    p.innerHTML="<pre><h2>Character Profile<\/h2><\/pre>"
        + "<pre><p>Gender: " 
        + getGenderFromRadio()
        + "<\/p><\/pre>";
}