I want to print a multiplication table of user input number. But nothing's happening in the click But what's the mistake? or have I jump into this program early?
<body>
<p>Multiplication table</p>
<input placeholder="Enter the number" type="text" name="number" id="quest"/>
<br />
<button onclick="multFunction()">Process</button>
<br />
<p id="multiply"></p>
<script>
function multFunction() {
var a = document.getElementsById("quest").value;
var i = 1;
for (i = 1 ; i < 11 ; i++) {
var c = parseInt(a) * parseInt(i);
document.getElementById("multiply").innerHTML = a + "x" + i + "=" + c;
}
}
</script>
I want to print a multiplication table of user input number. But nothing's happening in the click But what's the mistake? or have I jump into this program early?
<body>
<p>Multiplication table</p>
<input placeholder="Enter the number" type="text" name="number" id="quest"/>
<br />
<button onclick="multFunction()">Process</button>
<br />
<p id="multiply"></p>
<script>
function multFunction() {
var a = document.getElementsById("quest").value;
var i = 1;
for (i = 1 ; i < 11 ; i++) {
var c = parseInt(a) * parseInt(i);
document.getElementById("multiply").innerHTML = a + "x" + i + "=" + c;
}
}
</script>
-
2
Typo: your
getElementsByIdshould begetElementById– Cerbrus Commented Sep 16, 2015 at 9:44 - 1 Have you checked the console (F12)? Maybe you'll see an error message there. – GolezTrol Commented Sep 16, 2015 at 9:44
2 Answers
Reset to default 4There's a couple of mistakes in your code:
var a = document.getElementsById("quest").value;
Should be:
var a = document.getElementById("quest").value;
// ^ No "s" there.
Next, you don't want to replace the innerHTML each time, you want to add a new row to it, instead. However, writing to innerHTML that often isn't a good idea. (each write to it causes your browser to re-parse the DOM)
Replace:
document.getElementById("multiply").innerHTML = a + "x" + i + "=" + c;
With:
result += a + " x " + i + " = " + c + '</br>';
And add result = ''; at the front of your function. Then, after the loop, write result to the innerHTML
Here's a working demo:
function multFunction() {
var a = document.getElementById("quest").value;
var i = 1;
var result = '';
for (i = 1 ; i < 11 ; i++) {
var c = parseInt(a) * parseInt(i);
result += a + " x " + i + " = " + c + '</br>';
}
document.getElementById("multiply").innerHTML = result;
}<p>Multiplication table</p>
<input placeholder="Enter the number" type="text" name="number" id="quest"/>
<br />
<button onclick="multFunction()">Enter the number</button>
<br />
<p id="multiply"></p>Fix getElementsById at the first line in multFunction() it should be
getElementById
using browser console or plugins like Firebug will make it easier for you to catch such errors