Question

你好可能是一个菜鸟问题，但我仍在学习：）

基本上，我试图让用户输入一个最多乘以10 i的数字，然后在列表中以html形式显示乘法。

当我按下按钮提交数字时，输出会快速闪烁到屏幕上，并且不会保留

下面是我的代码，对您的帮助可能会很愚蠢！

function TimesTable() {
  var number = document.getElementById('number').value;



  for (i = 1; i <= 10; i++) {
    var result = number * i;
    console.log(result);

  }

  document.getElementById("outPut").innerHTML = result;


}

<!DOCTYPE html>
<html>

<head>
  <link href="https://fonts.googleapis.com/css?family=Lilita+One" rel="stylesheet">
  <link href="https://fonts.googleapis.com/css?family=Open+Sans" rel="stylesheet">
  <link href="Style.css" type="text/css" rel="stylesheet">
  <script type="text/javascript" src="Script.js"></script>
  <title>Times Tables</title>
</head>

<body>
  <div class="container">
    <h1>Times Tables</h1>
    <p>Please Enter A number below to times</p>
    <form action="">
      Times: <input id="number" type="text" name="number1" size="3"><br>
      <br>
      <input type="submit" value="Print Time Table" onclick="TimesTable()">
    </form>
    <div id="outPut">
    </div>
  </div>
</body>

</html>

Answer 1

H。 Figueiredo是正确的，输入类型应为“ button。您的javascript也有逻辑错误。

  for (i = 1; i <= 10; i++) {
    var result = number * i;
  }

此块在每次迭代时都覆盖结果值。所以最后，结果只会是数字* 10。

您可能想要做的是创建一个“结果”数组，并用所有元素填充它。然后，您可以将其传递到“ outPut”元素。

Answer 2

与其他答案一起，如果您使用的是表格，则在提交表格时将刷新页面。

要禁用刷新，请让表单提供事件调用：

<form action=#" onsubmit="yourjsfunction(); return false">

这样您的页面就不会刷新。

Answer 3

只需将type="submit"替换为type="button"即可避免提交页面。

function TimesTable() {
  var number = document.getElementById('number').value;



  for (i = 1; i <= 10; i++) {
    var result = number * i;
    console.log(result);

  }

  document.getElementById("outPut").innerHTML = result;


}

<!DOCTYPE html>
<html>

<head>
  <link href="https://fonts.googleapis.com/css?family=Lilita+One" rel="stylesheet">
  <link href="https://fonts.googleapis.com/css?family=Open+Sans" rel="stylesheet">
  <link href="Style.css" type="text/css" rel="stylesheet">
  <script type="text/javascript" src="Script.js"></script>
  <title>Times Tables</title>
</head>

<body>
  <div class="container">
    <h1>Times Tables</h1>
    <p>Please Enter A number below to times</p>
    <form action="">
      Times: <input id="number" type="text" name="number1" size="3"><br>
      <br>
      <input type="button" value="Print Time Table" onclick="TimesTable()">
    </form>
    <div id="outPut">
    </div>
  </div>
</body>

</html>

将Javascript计算输出到html

3 个答案: