Sergi Sergi - 3 months ago 9
HTML Question

Multiplication table in HTML/Javascript

I'd like to know if I'm too far off here, I want to have a form, in this case a multiplication table and have Javascript compare the results and show if it's correct or not (I realize this code may seem grotesque to some of you but I'm new to this and this is a self imposed exercise).

HTML:

<html>

<body>

<form id="myForm">

</h3> 2 * 1 = </h3> <input id="one" type="text" name="1" maxlength="4" size="2"><br>
</h3> 2 * 2 = </h3> <input id="two" type="text" name="2" maxlength="4" size="2"><br>
</h3> 2 * 3 = </h3> <input id="three" type="text" name="3" maxlength="4" size="2"><br>
</h3> 2 * 4 = </h3> <input id="four" type="text" name="4" maxlength="4" size="2"><br>
</h3> 2 * 5 = </h3> <input id="five" type="text" name="5" maxlength="4" size="2"><br>
</h3> 2 * 6 = </h3> <input id="six" type="text" name="6" maxlength="4" size="2"><br>
</h3> 2 * 7 = </h3> <input id="seven" type="text" name="7" maxlength="4" size="2"><br>
</h3> 2 * 8 = </h3> <input id="eigth" type="text" name="8" maxlength="4" size="2"><br>
</h3> 2 * 9 = </h3> <input id="nine" type="text" name="9" maxlength="4" size="2"><br>
</h3> 2 * 10= </h3> <input id="ten" type="text" name="10" maxlength="4" size="2"><br><br>

<input id="submit" type="button" onclick="myFunction()" value="Submit Form">




<h1 id="results"> Results</h1>






Javascript:

var one = document.getElementById("one").value;
var two = document.getElementById("two").value;
var three = document.getElementById("three").value;
var four = document.getElementById("four").value;
var five = document.getElementById("five").value;
var six = document.getElementById("six").value;
var seven = document.getElementById("seven").value;
var eight = document.getElementById("eight").value;
var nine = document.getElementById("nine").value;
var ten = document.getElementById("ten").value;

var results = document.getElementById("results");

function myFunction() {
var submit = document.getElementById("submit").submit();
if (one === 2 && two === 4 && three === 6 && four === 8 && five === 10 && six === 12 && seven === 14 && eigth === 16 && nine === 18 && ten === 20) {
document.getElementById("results").innerHTML = "Correct!"
} else {
document.getElementById("results").innerHTML = "Try Again!"
}
};

Answer

This is What Your are expecting

function myFunction() {
  var one = document.getElementById("one").value;
var two = document.getElementById("two").value;
var three = document.getElementById("three").value;
var four = document.getElementById("four").value;
var five = document.getElementById("five").value;
var six = document.getElementById("six").value;
var seven = document.getElementById("seven").value;
var eight = document.getElementById("eight").value;
var nine = document.getElementById("nine").value;
var ten = document.getElementById("ten").value;

var results = document.getElementById("results");
var submit = document.getElementById("submit");
   if (one == 2 && two == 4 && three == 6 && four == 8 && five == 10 &&  six == 12 && seven == 14 && eight == 16 && nine == 18 && ten == 20) {
        document.getElementById("results").innerHTML = "Correct!"
    } else {
        document.getElementById("results").innerHTML = "Try Again!"
    }
 }
h3{
display:inline;
}
<!DOCTYPE html>
<html>

  <head>
    <link rel="stylesheet" href="style.css">
    
  </head>

  <body>
<form id="myForm">

    <h3> 2 * 1 = </h3> <input id="one" type="text" name="1" maxlength="4" size="2"><br>
    <h3> 2 * 2 = </h3> <input id="two" type="text" name="2" maxlength="4" size="2"><br>
    <h3> 2 * 3 = </h3> <input id="three" type="text" name="3" maxlength="4" size="2"><br>
    <h3> 2 * 4 = </h3> <input id="four" type="text" name="4" maxlength="4" size="2"><br>
    <h3> 2 * 5 = </h3> <input id="five" type="text" name="5" maxlength="4" size="2"><br>
    <h3> 2 * 6 = </h3> <input id="six" type="text" name="6" maxlength="4" size="2"><br>
    <h3> 2 * 7 = </h3> <input id="seven" type="text" name="7" maxlength="4" size="2"><br>
    <h3> 2 * 8 = </h3> <input id="eight" type="text" name="8" maxlength="4" size="2"><br>
    <h3> 2 * 9 = </h3> <input id="nine" type="text" name="9" maxlength="4" size="2"><br>
    <h3> 2 * 10= </h3> <input id="ten" type="text" name="10" maxlength="4" size="2"><br><br>

  <input id="submit" type="button" onclick="myFunction()" value="Submit Form">
  
    <h1 id="results"> Results</h1>
    </form>
    <script src="script.js"></script>
  </body>

</html>