Page 1 of 3 123 LastLast
Results 1 to 10 of 24

Thread: Element help

  1. #1
    Join Date
    Oct 2013
    Location
    Finland
    Posts
    52
    Thanks
    5
    Thanked 0 Times in 0 Posts

    Question Element help

    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!

  2. #2
    Join Date
    Apr 2008
    Location
    So.Cal
    Posts
    3,643
    Thanks
    63
    Thanked 516 Times in 502 Posts
    Blog Entries
    5

    Default

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

  3. #3
    Join Date
    Oct 2013
    Location
    Finland
    Posts
    52
    Thanks
    5
    Thanked 0 Times in 0 Posts

    Default

    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>

  4. #4
    Join Date
    Apr 2008
    Location
    So.Cal
    Posts
    3,643
    Thanks
    63
    Thanked 516 Times in 502 Posts
    Blog Entries
    5

    Default

    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
    Last edited by traq; 11-16-2013 at 03:24 PM. Reason: fixed url

  5. #5
    Join Date
    Oct 2013
    Location
    Finland
    Posts
    52
    Thanks
    5
    Thanked 0 Times in 0 Posts

    Default

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

  6. #6
    Join Date
    Apr 2008
    Location
    So.Cal
    Posts
    3,643
    Thanks
    63
    Thanked 516 Times in 502 Posts
    Blog Entries
    5

    Default

    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.
    Last edited by traq; 11-16-2013 at 03:24 PM. Reason: fixed URL

  7. #7
    Join Date
    Oct 2013
    Location
    Finland
    Posts
    52
    Thanks
    5
    Thanked 0 Times in 0 Posts

    Question

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

  8. #8
    Join Date
    Apr 2008
    Location
    So.Cal
    Posts
    3,643
    Thanks
    63
    Thanked 516 Times in 502 Posts
    Blog Entries
    5

    Default

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

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

  9. #9
    Join Date
    Oct 2013
    Location
    Finland
    Posts
    52
    Thanks
    5
    Thanked 0 Times in 0 Posts

    Default

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

  10. #10
    Join Date
    Apr 2008
    Location
    So.Cal
    Posts
    3,643
    Thanks
    63
    Thanked 516 Times in 502 Posts
    Blog Entries
    5

    Default

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

Similar Threads

  1. Resolved Ajax loaded element not recognized in ajax post send(element)?
    By crobinson42 in forum JavaScript
    Replies: 6
    Last Post: 04-10-2012, 08:48 PM
  2. <a> element
    By d-machine in forum CSS
    Replies: 1
    Last Post: 10-06-2009, 04:10 PM
  3. Replies: 5
    Last Post: 11-19-2008, 04:02 AM
  4. Replies: 0
    Last Post: 01-13-2008, 05:24 PM
  5. Changing the first TR element to THEAD element
    By codeexploiter in forum JavaScript
    Replies: 3
    Last Post: 03-23-2007, 11:02 AM

Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •