在我的回文检查器中，我无法从 HTML 输入文本字段中获取值。我尝试了各种方法，包括查询选择器。但仍然有效。验证器中的错误是 document.getElement(...) 为空。
我需要找出我的代码有什么问题。我的 DOM 有问题吗？
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Palindrome Checker</title>
<link rel="stylesheet" href="ex.css" type="text/css">
<!--<script src="ex.js"></script>-->
<script>
var i = document.getElementById('boiler').value;
function check_pal() {
rev();
if (i == rev()) {
alert(i + " is a palindrome");
} else {
alert(i + " is not a palindrome")
}
}
function rev() {
i = i + "";
return i.split("").reverse().join("");
}
</script>
</head>
<body>
<div>
<h1>Palindrome Checker</h1>
<p>- Word limit "18000"</p>
</div>
<div>
<input type="text" id="boiler" name="boiler" /><br>
<input type="submit" name="palcheck" id="butn" value="Is it a Palindrome?" onclick="check_pal()" />
</div>
</body>
</html>我不太确定我的问题出在文档模型上。 因为当我直接将值赋给变量时我得到了正确的结果。否则我得到“undefined is not a palindrome”
最佳答案
将您的脚本更新为以下内容
<script>
function check_pal() {
// move this line inside the function
var i = document.getElementById('boiler').value;
// rev(); // Also removed this un-necessary call
if (i == rev(i)) {
alert(i + " is a palindrome");
} else {
alert(i + " is not a palindrome")
}
}
// modify function to take input as argument rather than relying on global variable
function rev(i) {
i = i + "";
return i.split("").reverse().join("");
}
</script>
推理 - 当您手动分配 i 的值时，它会正确运行。然而，当我们尝试从 getElementById 读取它时，该元素当时不存在并且它抛出一个 JS 错误(无法读取 null 的属性“值”)，因此，错误(因为我从未初始化并保持 undefined)。将值的检索移到可以检索最新值并将其存储在 i 中的函数内。
关于javascript - 从文本字段派生值到 javascript(DOM 问题)!，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/50059399/