CODEWITHSUNDEEP
javascripthtml
Sergi
Sergi

Reputation: 1240

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!"
    }
 };

Upvotes: 0

Views: 5952

Answers (2)

SriDivyaReddy
SriDivyaReddy

Reputation: 11

try this code:

<html>
<head>
<script language="javascript" type="text/javascript">
function myFunction()
{
var i=0;
var n=prompt("enter a number:")
var str="";
for(i=1;i<=10;i++)
{
document.write('<table border="1" cellspacing="0">');
for(i=1;i<=10;i++) {
    document.write("<tr><td>" + n + " x " + i + " = " + n*i + "</td></tr>");
}
 document.write("</table>");
}
}
</script>
</head>
<body onLoad="myFunction()">
<p id="msg"></p>
</body>
</html>

or else use this for particular two numbers:

<html>
<head>
<script language="javascript" type="text/javascript">
function myFunction()
{
var n=prompt("enter a number 1:");
var i=prompt("enter a number 2:");
var str="";
document.write("output is :"+ n + " x " + i + " = " + n*i);
}
</script>
</head>
<body onLoad="myFunction()">
<p id="msg"></p>
</body>
</html>

Upvotes: 1

Gowtham
Gowtham

Reputation: 1597

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>

Upvotes: 1

Related Questions