JavaScript - writing value into html form from script

Question

I was wondering how I could input a value into a form with html. So right when the user goes to the site there's numbers in the text boxes already and they use those numbers to play and "addition game". This is what I have so far:

     <script type="text/javascript">

    function addSubmit() {
//trying to have num1 and num2 write into the html form
    var num1= Math.floor(89+Math.random()*11);
    var num2 = Math.floor(89+Math.random()*11);
    /*num1 = value1
    num2 = value2*/
    document.getElementById("value1").value = num1;
    document.getElementById("value2").value = num2;

    var guess = document.getElementById("submit").value;
    var answer = num1 + num2;
    //have to write this to main window
    if (guess == answer)
    document.writeln("Congratulations you answered correctly! The answer to: "+num1+"+"+num2+"= "+answer);
    else
    document.writeln("Nice try, but the correct answer to: "+num1+"+"+num2+"= "+answer);
    }

    function addGiveUp() {
    var num1 = Math.floor(89+Math.random()*11)
    var num2 = Math.floor(89+Math.random()*11)
    document.addition.value1.value=num1;
    document.addition.value2.value=num2;
    var guess = document.getElementById("submit").value;
    var answer = (document.getElementById("value1").value) + (document.getElementById("value2").value);
    document.writeln("Never give up! The answer to: "+num1+"+"+num2+"= "+answer);
    }
    </script>
    <form name="addition" action="" method="get">
    <table border="1">
             <tr>
         <td>Value 1:</td> <td><input type="text" name="value1" id="value1"/></td>
                 </tr>
             <tr>
         <td>Value 2:</td> <td><input type="text" name="value2" id="value2"/></td>
                 </tr>
             <tr>
         <td>Answer:</td> <td><input type="text" id="answer" /></td>
                 </tr>
             <tr><td><input type="button" value="Submit" onClick="addSubmit()" id="submit" /></td><td><input type="button" value="Give Up" onClick="addGiveUp()" /></td></tr>
             </table>
    </form>

I appreciate any help! Thanks!

what is the problem? where are you stuck? is this homework? are you just looking for review? welcome to SO — rlemon, May 08 '12 at 22:22
It's homework. I'm stuck at how to write values into the html form i have in the code. I want to use the javascript code to write into the form w/o having to move the form into the script and thanks! — Gcap, May 08 '12 at 22:24

score 4 · Accepted Answer · answered May 08 '12 at 22:45

well you can put this script after the form is created:

<form name="addition" action="" method="get">
            <table border="1">
                     <tr>
                 <td>Value 1:</td> <td><input type="text" name="value1" id="value1"/></td>
                         </tr>
                     <tr>
                 <td>Value 2:</td> <td><input type="text" name="value2" id="value2"/></td>
                         </tr>
                     <tr>
                 <td>Answer:</td> <td><input type="text" id="answer" /></td>
                         </tr>
                     <tr><td><input type="button" value="Submit" onClick="addSubmit()" id="submit" /></td><td><input type="button" value="Give Up" onClick="addGiveUp()" /></td></tr>
                     </table>
</form>

<!-- This is the script-->
 <script type="text/javascript">
      document.getElementById("value1").value = Math.floor(89+Math.random()*11);
      document.getElementById("value2").value = Math.floor(89+Math.random()*11);
  </script>

That would generate random numbers for you and put them in the form See here for the code: http://jsfiddle.net/wVAFt/

The only thing is now the answer variable is coming out to be num1 and num2 smashed together.. sometimes i hate programming -_- — Gcap, May 08 '12 at 23:20

score 1 · Answer 2 · answered May 08 '12 at 22:26

1

<input type="text" id="answer" value="5" >

or

document.getElementById("answer").value = "5";

answered May 08 '12 at 22:26

Jamund Ferguson

16,721
3
42
50

Thank you, but the problem is that I want to write the value of a variable into the form. That kind of worked for me by replacing 5 with the variable name, except i have to hit submit and then hit the back button to see the variable values in the text boxes – Gcap May 08 '12 at 22:34
You can make a button that doesn't submit the form but trigger some sort of update! – Jamund Ferguson May 09 '12 at 04:16

score 0 · Answer 3 · answered May 08 '12 at 22:46

0

To have numbers in input fields you can set them to have a value, like value="10" and the default value would be 10 until the user changes it.

answered May 08 '12 at 22:46

Grigor

4,139
10
41
79

JavaScript - writing value into html form from script

3 Answers3

Linked

Related