为什么 document.getElementById 不起作用？
[英]Why doesn't document.getElementById not work?
问题描述
As the title suggest, somehow document.getElementById doesn't seem to retrieve the elements in the line: document.getElementById("text").innerHTML = saltgen(document.getElementById("num"));
正如标题所暗示的那样， document.getElementById 似乎并没有检索到以下行中的元素： document.getElementById("text").innerHTML = saltgen(document.getElementById("num"));
For context, I have unpacked the code into the Chrome extension.对于上下文，我已将代码解压缩到 Chrome 扩展程序中。 Here is Code:这是代码：
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>
The error I used to have is "getElementById is not defined" at the line document.getElementById("text").innerHTML = saltgen(document.getElementById("num"));我曾经遇到的错误是document.getElementById("text").innerHTML = saltgen(document.getElementById("num"));行中的“getElementById is not defined”。 " but after I have reloaded the error somehow doesn't show up, but when the button is clicked, the text "Salt goes here" simply disappears instead of being replaced with the result of the function defined in the javascript file. " 但是在我重新加载后，错误不会以某种方式出现，但是当单击按钮时，文本“Salt 在这里”只是消失了，而不是被 javascript 文件中定义的 function 的结果替换。
2 个解决方案
解决方案1
1 已采纳 2021-02-15 22:34:26
You are passing the retrieved element to saltgen() instead of the value.您将检索到的元素传递给saltgen()而不是值。
You can retrieve the value from the element by accessing its value property: document.getElementById("num").value will return the value of the input.您可以通过访问其value属性从元素中检索值： document.getElementById("num").value将返回输入的值。
Also, unless you specifically need the new value parsed as HTML, you should use textContent instead of innerHTML to set the new text.此外，除非您特别需要解析为 HTML 的新值，否则您应该使用textContent而不是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>
解决方案2
0 2021-02-15 22:15:38
You can use debugging, or console output, to see whats wrong你可以使用调试，或者控制台output，看看有什么问题
function myFunction(){
let num = document.getElementById("num");
let salt = saltgen(num);
console.info("num", num, "salt", salt)
document.getElementById("text").innerHTML = salt;
}
'num' is not the number but the element 'num' 不是数字而是元素
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.