CODEWITHSUNDEEP
javascript
Manu Karki
Manu Karki

Reputation: 103

Print Multiplication Table

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>

Upvotes: 1

Views: 4484

Answers (2)

Mohamed Badr
Mohamed Badr

Reputation: 2642

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

Upvotes: 3

Cerbrus
Cerbrus

Reputation: 72927

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

Upvotes: 4

Related Questions