CODEWITHSUNDEEP
javascripthtmlcss
alonelycoder
alonelycoder

Reputation: 103

Unable to generate a multiplication table with user input in JavaScript

I have a page which prompts the user to enter a positive integer from 1 to 9, then the javascript code will generate a multiplication table from the input value all the way to 9. I am getting an error in which I cannot retrieve the value and do a multiplication with it.

function timesTable()
{
    var values = document.getElementById('value1');

    var showTables = '';
    for (var i=1; i<9; i++) {
       showTables += values + " x " + i +" = "+ values*i + "\n";
    }
    var p_tables = document.getElementById('tables').innerHTML = showTables;
}
<label>Enter an integer from 1 to 9 : </label>
<input type="text" size=20 id=value1 name="value">
<button onclick="timesTable()">Generate times table</button><br> <br>
<p id="tables"></p>

Expected result: expectedresult

Upvotes: 0

Views: 2005

Answers (5)

Gaurav
Gaurav

Reputation: 1

you are using input field as text for table generation its better to use Number as input type and to get the value of input field you have to use value function as used in above code and for line break use <\br>(please ignore '\'). 

function timesTable()
{
    var values = document.getElementById('value1').value;
    var showTables = '';
    for (var i=1; i<=9; i++) {
       showTables += values + " x " + i +" = "+ values*i + "<br>";
    }
    document.getElementById('tables').innerHTML = showTables;
}
<label>Enter an integer from 1 to 9 : </label>
<input type="Number" size=20 id=value1 name="value">
<button onclick="timesTable()">Generate times table</button><br> <br>
<p id="tables"></p>

Upvotes: 0

Cat
Cat

Reputation: 4246

This does what you want.
Note that if the user enters something unexpected, it may still fail. You can use an input of type="number" to require an integer (at least in some browsers.)

  const userValue = document.getElementById("value1").value;
  const p_tables = document.getElementById("tables");
  let outputHtml = "";
  for(let i = 1; i < 10; i++){
    outputHtml += userValue + " x " + i + " = " + userValue * i + "<br/>";
  }
  p_tables.innerHTML = outputHtml;

Upvotes: 0

Pallavi
Pallavi

Reputation: 31

the javascript line in which you are trying to find value, is wrong as it will return the whole DOM and it's attributes and property. You just have to find it's value, replace you line 

var values = document.getElementById('value1');

with

var values = document.getElementById('value1').value;

Upvotes: 0

user10957435
user10957435

Reputation:

You are trying to multiply the element itself. What you actually want is the value.

function timesTable()
{
    var values = document.getElementById('value1').value;

    var showTables = '';
    for (var i=1; i<9; i++) {
       showTables += values + " x " + i +" = "+ values*i + "\n";
    }
    var p_tables = document.getElementById('tables').innerHTML = showTables;
}
<label>Enter an integer from 1 to 9 : </label>
<input type="text" size=20 id=value1 name="value">
<button onclick="timesTable()">Generate times table</button><br> <br>
<p id="tables"></p>

Upvotes: 0

ellipsis
ellipsis

Reputation: 12152

You have to take the value of the element not the element itself

 var values = document.getElementById('value1').value;


function timesTable()
{
    var values = document.getElementById('value1').value;

    var showTables = '';
    for (var i=1; i<9; i++) {
       showTables += values + " x " + i +" = "+ values*i + "<br>";
    }
    var p_tables = document.getElementById('tables').innerHTML = showTables;
}
<label>Enter an integer from 1 to 9 : </label>
<input type="text" size=20 id=value1 name="value">
<button onclick="timesTable()">Generate times table</button><br> <br>
<p id="tables"></p>

Upvotes: 2

Related Questions