Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

JavaScript - writing value into html form from script

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!

like image 849
Gcap Avatar asked May 08 '12 22:05

Gcap


1 Answers

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/

like image 85
adedoy Avatar answered Oct 11 '22 14:10

adedoy