Question

在对值进行硬编码（即20）时，我可以创建乘法表，但是当我尝试通过按钮获取用户输入时，它不起作用。我对HTML / jQuery很不满意。我更喜欢Java和python。请帮忙！

// 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>

在上方，您可以看到我尝试添加userInput的位置，并在其中添加了注释。我认为问题在于该程序没有在等待用户输入数字并单击按钮。请帮忙！谢谢大家！

Answer 1

您的输入（userNumber）被视为字符串。因此，+运算符充当了一个串联-2的用户输入变为"21"。

相反，使用int将字符串解析为parseInt（如下所示）：

// 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>

一些其他要考虑的项目，尽管有点超出您的问题范围：

document.write() is considered poor practice。考虑将createElement()之类的方法与appendChild()结合使用，以更灵活，快速，动态地将数据写入DOM。
使用placeholder attribute或a label将期望的输入传达给字段-这将极大地改善表单的用户体验，而您几乎不需要付出任何努力。

创建一个乘法表

1 个答案: