Creating a multiplication table

Question

I'm able to create the multiplication table when hardcoding a value (i.e. 20), but when I try and get user input through a button it doesn't work. I am terrible with HTML / jQuery.. I prefer java and python. Please help!

// getting user input:
$(document).ready(function() {
  $('#hit').click(function() {
    var userNumber = $('#term').val();
    alert(userNumber);



    // var $userInput = $("#userInput");
    // $('#hit').click(function() {

    var color_td;
    document.write("<table border='1px'>");

    for (var i = 1; i < userNumber + 1; i++) { //userNumber VERSUShcoding 20



      document.write("<tr style='height:30px;'>");

      for (var j = 1; j < userNumber + 1; j++) {

        if (j == 1 || i == 1) {
          color_td = "#ccc";
        } else {
          color_td = "#fff";
        }

        document.write("<td style='width:30px;background-color:" + color_td + "'>" + i * j + "</td>");
      }
      document.write("</tr>");
    }

    document.write("</table>");
  });
});

<!DOCTYPE htmlPUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN""http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>

<head>
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
  <!-- <script src="jquery.js"></script> -->

  <body>

    <!--     <form id="form">
     <label>Input :</label>
    <input type="text" id="userInput" value="0" /> -->
    <!-- <input type="button" id="userInput" value="Submit the value!"/> -->

    <!-- </form> -->

    <div id="search">
      <input id="term" type="text" value="Enter a number | 1-50" />
      <button id="hit" type="button" name="">Enter</button>
    </div>
  </body>
</head>


</html>

Up above you can see where I tried adding adding the userInput, I added a comment there. I think the problem is that the program is not waiting for the user to input a number and click the button. Please help! Thanks all!

score 3 · Accepted Answer · answered Mar 27 '19 at 01:18

Your input (userNumber) is being treated as a string. Thus, a + operator acts as a concatenation - a user input of 2 becomes "21".

Instead, parse the string as an int with parseInt (demonstrated below):

// getting user input:
$(document).ready(function() {
  $('#hit').click(function() {
    var userNumber = parseInt($('#term').val());
    alert(userNumber);



    // var $userInput = $("#userInput");
    // $('#hit').click(function() {

    var color_td;
    document.write("<table border='1px'>");

    for (var i = 1; i < userNumber + 1; i++) { //userNumber VERSUShcoding 20



      document.write("<tr style='height:30px;'>");

      for (var j = 1; j < userNumber + 1; j++) {

        if (j == 1 || i == 1) {
          color_td = "#ccc";
        } else {
          color_td = "#fff";
        }

        document.write("<td style='width:30px;background-color:" + color_td + "'>" + i * j + "</td>");
      }
      document.write("</tr>");
    }

    document.write("</table>");
  });
});

<!DOCTYPE htmlPUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN""http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>

<head>
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
  <!-- <script src="jquery.js"></script> -->

  <body>

    <!--     <form id="form">
     <label>Input :</label>
    <input type="text" id="userInput" value="0" /> -->
    <!-- <input type="button" id="userInput" value="Submit the value!"/> -->

    <!-- </form> -->

    <div id="search">
      <input id="term" type="text" value="Enter a number | 1-50" />
      <button id="hit" type="button" name="">Enter</button>
    </div>
  </body>
</head>


</html>

Some additional items for consideration, albeit a bit out of the scope of your question:

document.write() is considered poor practice. Consider using methods like createElement() in conjunction with appendChild() for more flexible, quick, and dynamic writing of data to the DOM.
Use the placeholder attribute or a label to convey the expected input to a field - this will improve the UX of your form drastically with little to no effort on your part.

Thank you so much. I'll put createElement() + appendChild() into future practice. Additionally, is there a way I can prevent the multiplication table from replacing the input box? — E. Goldsmi, Mar 27 '19 at 14:25
@E.Goldsmi that's again a side-effect of using `document.write()` and is explained in the top answer on the linked SO question: "*[`document.write()`] executed after the page has finished loading will overwrite the page...*" — esqew, Mar 27 '19 at 14:33

Creating a multiplication table

1 Answers1