JavaScript - writing a value to an html form from a script

I was wondering how I can enter a value in a form with html. So when the user goes to the site, there are already numbers in the text fields, and they use these numbers to play and “add a game”. This is what I still have:

     <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! Thank!

+5
source share
3 answers

well, you can put this script after creating the form:

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

This will create random numbers for you and place them on the form. See here for the code: http://jsfiddle.net/wVAFt/

+3
source
<input type="text" id="answer" value="5" >

or

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

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

0
source

All Articles