Question

我试图用java循环创建表，我认为它运行良好。但是我在阅读输入时遇到了另一个错误。当我输入数字并按下按钮时，它应该从数字中读取信息，但它会保持输出＆＃34; null＆＃34;对于h2部分，＆＃34; 0＆＃34;对于细胞内部。我认为这段代码生成null，因为它无法从输入中读取数字。所以我想知道这里有什么问题。

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width,initial-scale=1.0">
<title>Multiplication table</title>

<link rel="stylesheet" href="styles.css" />
<script src="Generate.js"></script>

</head>

<body>
<header>
<h1>Multiplication Table</h1>
</header>

<article>
  <form>
      <fieldset>
        Enter a number: <input type="number" id="number" />
      </fieldset>
      <fieldset>
        <button type="button" id="button">Generate Times Table</button>
      </fieldset>
  </form>
  <center>
  <h2 id="name"></h2>
  <div id="results">
  <script>
    var submitButton = document.getElementById("button");
    if (submitButton.addEventListener) {
     submitButton.addEventListener("click", generatetable, false); 
     window.addEventListener("load", function() {
        document.getElementById('number').innerHTML = "";
    }, false);
    }
    else if (submitButton.attachEvent)  {
     submitButton.attachEvent("onclick", generatetable);
     window.attachEvent("onload", function() {
        document.getElementById('number').innerHTML = "";
                 });
    } 
    </script>      
</div>
</center>
</article>
</body>
</html>

这是我的Generate.js

var input = document.getElementById("number");
var table = document.createElement('table'), tr, td, row, cell;
var times = 0;

function generatetable() {
    document.getElementById("name").innerHTML = input + " Times Table";
    for (row = 0; row < 10; row++) {
       tr = document.createElement('tr');
           for (cell = 1; cell <= 3; cell++) {
               times++;
               var result = input * times;
               td = document.createElement('td');
               tr.appendChild(td);
               td.innerHTML = result;
               }
     table.appendChild(tr);
     }
     document.getElementById('results').appendChild(table);
}

Answer 1

这有很多问题，但我确实有效。

var submitButton = document.getElementById("button");
if (submitButton.addEventListener) {
  submitButton.addEventListener("click", generatetable, false);
  window.addEventListener("load", function() {
    document.getElementById('number').value = "";
  }, false);
} else if (submitButton.attachEvent) {
  submitButton.attachEvent("onclick", generatetable);
  window.attachEvent("onload", function() {
    document.getElementById('number').value = "";
  });
}

function generatetable() {
  var input = Number(document.getElementById("number").value);
  var table = document.createElement('table'),
    tr, td, row, cell;
  var times = 0;
  document.getElementById("name").innerHTML = input + " Times Table";
  for (row = 0; row < 10; row++) {
    tr = document.createElement('tr');
    for (cell = 1; cell <= 3; cell++) {
      times++;
      var result = input * times;
      td = document.createElement('td');
      td.innerHTML = result;
      tr.appendChild(td);
    }
    table.appendChild(tr);
  }
  document.getElementById('results').appendChild(table);
}

<header>
  <h1>Multiplication Table</h1>
</header>

<article>
  <form>
    <fieldset>
      Enter a number:
      <input type="number" id="number" />
    </fieldset>
    <fieldset>
      <button type="button" id="button">Generate Times Table</button>
    </fieldset>
  </form>
  <center>
    <h2 id="name"></h2>
    <div id="results"></div>
  </center>
</article>

除了获取值之外，还需要在函数内移动input变量，否则它将始终保持其初始值，即0。

在Javascript中读取输入时出错

1 个答案: