为什么 document.getElementById 不起作用？

Question

如标题所示，document.getElementById 似乎无法检索行中的元素：document.getElementById("text").innerHTML = saltgen(document.getElementById("num"));

对于上下文，我已将代码解压缩到 Chrome 扩展中。这是代码：

document.getElementById("click").onclick = function() {myFunction()};

function myFunction() {
  document.getElementById("text").innerHTML = saltgen(document.getElementById("num"));
}

function saltgen(length) {
  var salt = "";
  var symbols = "ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789";
  var slength = symbols.length;
  for (var i = 0; i < length; i++) {
    salt = salt + symbols.charAt(Math.floor(Math.random() * slength));
  }
  return salt;
}

<html>
<br>
<h1>Set the number of characters</h1>
<input id="num" type="number" value="20"><br><br>
<button id="click">Generate</button>
<p id="text">Salt goes here</p>

<script src="jquery-3.5.1.min.js"></script>
<script src="salt_genj.js"></script>

</html>

我以前遇到的错误是 document.getElementById("text").innerHTML = saltgen(document.getElementById("num")); 行的“getElementById is not defined”，但在我重新加载后错误不知何故没有出现，但是当单击按钮时，文本“Salt goes here”简单地消失了，而不是被 javascript 文件中定义的函数的结果替换。

Answer 1

您可以使用调试或控制台输出来查看问题所在

function myFunction(){ 
    let num = document.getElementById("num");
    let salt = saltgen(num);
    console.info("num", num, "salt", salt)
    document.getElementById("text").innerHTML = salt;
 }

'num'不是数字而是元素

Answer 2

您正在将检索到的元素传递给 saltgen() 而不是值。

您可以通过访问元素的 value 属性从元素中检索值：document.getElementById("num").value 将 return 输入的值。

此外，除非您特别需要将新值解析为 HTML，否则您应该使用 textContent instead of innerHTML 来设置新文本。

document.getElementById("click").onclick = function() {myFunction()};

function myFunction() {
  document.getElementById("text").textContent = saltgen(document.getElementById("num").value); // Access 'value' property
}

function saltgen(length) {
  var salt = "";
  var symbols = "ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789";
  var slength = symbols.length;
  for (var i = 0; i < length; i++) {
    salt = salt + symbols.charAt(Math.floor(Math.random() * slength));
  }
  return salt;
}

<html>
<br>
<h1>Set the number of characters</h1>
<input id="num" type="number" value="20"><br><br>
<button id="click">Generate</button>
<p id="text">Salt goes here</p>

<script src="jquery-3.5.1.min.js"></script>
<script src="salt_genj.js"></script>

</html>

为什么 document.getElementById 不起作用？

Why doesn't document.getElementById not work?

html

javascript

google-chrome-extension