Advertisement
If you have a new account but are having problems posting or verifying your account, please email us on hello@boards.ie for help. Thanks :)
Hello all! Please ensure that you are posting a new thread or question in the appropriate forum. The Feedback forum is overwhelmed with questions that are having to be moved elsewhere. If you need help to verify your account contact hello@boards.ie

.value method in Javascript

Options
  • 27-09-2012 10:23am
    #1
    Endlessly Manipulable
    Registered Users Posts: 16 ✭


    Hey Duders & Dudettes,

    In this script:
    <!--
    <script type="text/javascript"> function changeText2(){ var userInput = document.getElementById('userInput').value; document.getElementById('boldStuff2').innerHTML = userInput; }
    </script>
    -->

    What, precisely does .value do after the .getElementById('userInput')?

    I just can't find an exact description through Google, and thats
    probably because it is so trivial that no one would actually bother
    asking the question, but please humour me :-)


Comments

  • Options
    #2
    dahamsta
    Banned (with Prison Access) Posts: 16,659 ✭✭✭✭dahamsta


    It returns the value of the element with the ID 'userInput'. Hence the name....


  • Options
    #3
    Endlessly Manipulable
    Registered Users Posts: 16 ✭Endlessly Manipulable


    I see it now, that makes sense, the getElementById is just pointing at the element with id = "userInput", its not doing anything after, thanks.

    Can anyone tell me whats wrong with my script? It won't run in the browsers, but I can't find the problem, been going up and down line by line.

    In Ruby I could see the line that is giving the script a problem, any way of doing that with Javascript? Can you run Javascript in something similar to cmd?

    <?xml version = "1.0" encoding = "utf-8"?>
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
    3 "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"&gt;

    <!-- Fig. 9.6: Craps.html -->
    <!-- Craps game simulation. -->
    <html xmlns = "http://www.w3.org/1999/xhtml"&gt;
    <head>
    <title>Programme that Simulates the Game of Craps</title>
    <style type = "text/css">
    table { text-align: right }
    body { font-family: arial, sans-serif }
    div.red { color: red }
    </style>
    <script type = "text/javascript">
    <!--
    // variables used to test the state of the game
    var WON = 0;
    var LOST = 1;
    var CONTINUE_ROLLING = 2;

    // other variables used in programme
    var firstRoll = true; // true if current roll is first
    var sumOfDice = 0; // sum of the dice
    var myPoint = 0; // point if no win/loss on the first roll
    var gameStatus = CONTINUE_ROLLING; // game not over yet

    // process one roll of the dice
    function play()
    {
    // get the point field on the page
    var point = document.getElementById( "pointfield" );

    // get the status div on the page
    var statusDiv = document.getElementById( "status" );
    if ( firstRoll ) // first roll of the dice
    {
    sumOfDice = rollDice();

    switch ( sumOfDice )
    {
    case 7: case 11: // win on first roll
    gameStatus = WON;
    // clear point field
    point.value = "";
    break;
    case 2: case 3: case 12: // lose on first roll
    gameStatus = LOST;
    // clear point field
    point.value = "";
    break;
    default:
    gameStatus = CONTINUE_ROLLING;
    myPoint = sumOfDice;
    point.value = myPoint;
    firstRoll = false;
    } // end switch
    } // end if
    else
    {
    sumOfDice = rollDice();

    if ( sumOfDice == myPoint ) // win by making point
    gameStatus = WON;
    else
    if ( sumOfDice == 7 ) // lose by rolling 7
    gameStatus = LOST;
    } // end else

    if ( gameStatus == CONTINUE_ROLLING )
    document.getElementById('status').innerHTML = "Roll again";
    else
    {
    if ( gameStatus == WON )
    document.getElementById('status').innerHTML = "Player wins. " +
    "Click Roll Dice to play again.";
    else
    document.getElementById('status').innerHTML = "Player loses. " +
    "Click Roll Dice to play again.";
    }
    firstRoll = true;
    } // end else
    } // end function play

    // roll the dice
    function rollDice()
    {
    var die1;
    var die2;
    var workSum;

    die1 = Math.floor( 1 + Math.random() * 6 );
    die2 = Math.floor( 1 + Math.random() * 6 );
    workSum = die1 + die2;

    document.getElementById( "die1field" ).value = die1;
    document.getElementById( "die2field" ).value = die2;
    document.getElementById( "sumfield" ).value = workSum;

    return workSum;
    // -->
    </script>
    </head>
    <body>
    <form action = "">
    <table>
    <caption>Craps</caption>
    <tr>
    <td>Die 1</td>
    <td><input id = "die1field" type = "text" /></td>
    </tr>
    <tr>
    <td>Die 2</td>
    <td><input id = "die2field" type = "text" /></td>
    </tr>
    <tr>
    <td>Sum</td>
    <td><input id = "sumfield" type = "text" /></td>
    </tr>
    <tr>
    <td>Point</td>
    <td><input id = "pointfield" type = "text" /></td>
    </tr>
    <tr>
    <td><input type = "button" value = "Roll Dice"
    onclick = "play()" class = "button" /></td>
    </tr>
    </table>
    <div id = "status" class = "red">
    Click the Roll Dice button to play</div>
    </form>
    </body>
    </html>


  • Options
    #4
    Mmmm_Lemony
    Registered Users Posts: 891 ✭✭✭Mmmm_Lemony


    You could insert a popup after each line of code, that way, when you don'tget a popup you know whats caused it.

    [HTML]alert("Line x, Process role of dice")[/HTML]


  • Options
    #5
    28064212
    Registered Users Posts: 10,624 ✭✭✭✭28064212


    OP, use Ctrl+Shift+J in Firefox or Chrome and you'll get an error console. From the looks of it, you don't have your braces matched up correctly. I hope you're using a better editor than Notepad, and actually indent your code

    Boardsie Enhancement Suite - a browser extension to make using Boards on desktop a better experience (includes full-width display, keyboard shortcuts, dark mode, and more). Now available through your browser's extension store.

    Firefox: https://addons.mozilla.org/addon/boardsie-enhancement-suite/

    Chrome/Edge/Opera: https://chromewebstore.google.com/detail/boardsie-enhancement-suit/bbgnmnfagihoohjkofdnofcfmkpdmmce



  • Options
    #6
    dotsman
    Registered Users Posts: 3,636 ✭✭✭dotsman


    Firebug is your friend here. Everything you'll need, from line by line javascript debugging & variable inspection, comms insections, html/css inspection etc.

    Once you start using it, you will never be able to understand how you ever developed javascript/web front-ends without it.


  • Advertisement
  • Options
    #7
    OwenM
    Registered Users Posts: 859 ✭✭✭OwenM


    Firebug is the canines gonads of debuggers ....

    search on youtube for:
    firebug javascript debugging
    to see how to use it....


  • Options
    #8
    COYW
    Closed Accounts Posts: 2,930 ✭✭✭COYW


    28064212 wrote: »
    I hope you're using a better editor than Notepad, and actually indent your code

    Aptana have a really nice editor for this kind of thing.


  • Options
    #9
    stevenmu
    Moderators, Society & Culture Moderators Posts: 9,689 Mod ✭✭✭✭stevenmu


    The developer tools in IE8+ also do javascript debugging, and do a pretty good job of it too.


  • Options
    #10
    Endlessly Manipulable
    Registered Users Posts: 16 ✭Endlessly Manipulable


    Thanks a lot guys, I feel like an idiot forgetting about Firebug, its been a while since I started doing javascript, I've forgotten everything :-(


  • Options
    #11
    Feathers
    Registered Users Posts: 1,082 ✭✭✭Feathers


    dotsman wrote: »
    Firebug is your friend here. Everything you'll need, from line by line javascript debugging & variable inspection, comms insections, html/css inspection etc.

    Once you start using it, you will never be able to understand how you ever developed javascript/web front-ends without it.

    JSLint is your other friend - spots silly syntax mistakes & keeps you on the straight and narrow


  • Advertisement
Advertisement