Display times table up to 12 based on the users input

Question

it seems to think ttinput is a string when I console.log the variable it says "". All else seems to working I just can't figure out how to have ttinput as a number.

document.getElementById("enter").addEventListener("click", ttcalc)
var ttinput = document.getElementById("table").value;
var ttoutput;


function ttcalc(){

        var display = "";

        for(var i = 1; i <= 12; i++){

            ttoutput = ttinput * i;
            display += ttinput + "*" + i + "=" + ttoutput + "<br>"
            console.log(ttoutput, ttinput, i);

        }

    document.getElementById("output").innerHTML = display;

}

this is my html

    <form>
            <h1>Enter what times table you wish to see</h1>
            <input type="number" id="table"><br>
        </form>

        <button id="enter">Show Times Table</button>
    </div>

write +ttinput where you want to convert the value to number if you are sure it's a number — Gaurav Singh, Mar 31 '20 at 18:36
Does this answer your question? [How to get a number value from an input field?](https://stackoverflow.com/questions/28695617/how-to-get-a-number-value-from-an-input-field) — Heretic Monkey, Mar 31 '20 at 18:42
You're getting the value before the page has loaded, so it's always empty. Get the value of "table" in the `ttcalc` function. — Heretic Monkey, Mar 31 '20 at 18:43
@narom391 Hi narom391, if my answer is a solution to your problem please consider marking it as accepted. Thanks. — Ivan86, Apr 08 '20 at 20:23

Ivan86 · Answer 1 · 2020-03-31T18:59:10.803

The problem is that the value of

var ttinput = document.getElementById("table").value;

is read on page load (while the input field is empty). If you move that line of code inside your function it will read the value of the input field after the button is clicked.

If you want to be sure the value entered is a number you can use the parseInt() function and then check if the result is a number with the isNaN() function like this:

var ttinput = parseInt(document.getElementById("table").value);

and then use isNaN():

if( !isNaN(ttinput) ) {
    // ttinput is a number
} else {
    // ttinput is not a number
}

More here: parseInt and isNaN.

Check example below:

document.getElementById("enter").addEventListener("click", ttcalc)

function ttcalc() {
  var ttinput = parseInt(document.getElementById("table").value);
  var ttoutput;
  var display = "";

  if( !isNaN(ttinput) ) {
    for(var i = 1; i <= 12; i++) {
      ttoutput = ttinput * i;
      display += ttinput + "*" + i + "=" + ttoutput + "<br>"
      console.log(ttoutput, ttinput, i);
    }
    document.getElementById("output").innerHTML = display;
  } else {
    console.log("value is not a number");
  }
}

<button id="enter">Enter</button>
<input type="text" id="table" value="">
<div id="output"></div>

Display times table up to 12 based on the users input

1 Answers1