Advertisement
Help Keep Boards Alive. Support us by going ad free today. See here: https://subscriptions.boards.ie/.
If we do not hit our goal we will be forced to close the site.

Current status: https://keepboardsalive.com/

Annual subs are best for most impact. If you are still undecided on going Ad Free - you can also donate using the Paypal Donate option. All contribution helps. Thank you.
https://www.boards.ie/group/1878-subscribers-forum

Private Group for paid up members of Boards.ie. Join the club.

.value method in Javascript

  • 27-09-2012 10:23AM
    #1
    Endlessly Manipulable
    Registered Users, Registered Users 2 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

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


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


  • #3
    Endlessly Manipulable
    Registered Users, Registered Users 2 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>


  • #4
    Mmmm_Lemony
    Registered Users, Registered Users 2 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]


  • #5
    28064212
    Registered Users, Registered Users 2 Posts: 11,089 ✭✭✭✭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



  • #6
    dotsman
    Registered Users, Registered Users 2 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
  • #7
    OwenM
    Registered Users, Registered Users 2 Posts: 860 ✭✭✭OwenM


    Firebug is the canines gonads of debuggers ....

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


  • #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.


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


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


  • #10
    Endlessly Manipulable
    Registered Users, Registered Users 2 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 :-(


  • #11
    Feathers
    Registered Users, Registered Users 2 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