我正在做一个程序,从输入字段返回值,然后根据条件将字段的字符串改变为x结果。我正在做一个程序,从输入字段返回值,然后根据条件改变字段的字符串和x结果,真的很感谢帮助,因为这里的成员在过去总是极大地帮助我。调试器正在抛出这个错误,当然什么都没有工作。
script.js:22 Uncaught TypeError: Cannot set property 'innerHTML' of null
at uberChecker (script.js:22)
at HTMLButtonElement.onclick (index.html:25)
以下是我的代码(初学者):
JS:
var username = document.getElementById("myUsername").value;
var groupIs = document.getElementById("myGroup").value;
var warnings = document.getElementById("myWarning").value;
var postCount = document.getElementById("myPostCount").value;
function uberChecker() {
if ((groupIs != ('Uber' || 'uber') && postCount > '1000') && warnings === '0') {
document.querySelector("output-box").innerHTML = "You can become Uber !";
} else if (postCount < '1000' && warnings === '0') {
document.querySelector("output-box").innerHTML = (username + ' You have ' + postCount + ' posts, you do not meet the requirements');
} else if (warnings != '0' && postCount > '1000') {
document.querySelector("output-box").innerHTML = (username + ' You cannot upgrade with ' + warnings + ' warning')
} else if (postCount < '1000' && warnings != '0') {
document.querySelector("output-box").innerHTML = (username + ' you have ' + postCount + ' posts which is less than 1000 and you have ' + warnings + '% warning. You cannot upgrade');
} else {
document.querySelector("output-box").innerHTML = (username + ' You are already Uber');
}
}
HTML:
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
<div class="blue-box"></div>
<input type="text" placeholder="Type username" id="myUsername" class="user" >
<input type="text" placeholder="Type user group" id="myGroup" class="group">
<input type="text" placeholder="Type post count" id="myPostCount" class="post">
<input type="text" placeholder="Type warning level" id="myWarning" class="warning">
<div class="UsernameText">Username</div>
<div class="groupText">Group</div>
<div class="postText">Posts</div>
<div class="warningText">Warning</div>
<button type="button" onclick="uberChecker();" class="black-box">Check if you are upgradeable</button>
<div class="output-box">Result will display here</div>
<script src="script.js"></script>
</body>
</html>
在类名前加个点。
document.querySelector(".output-box").innerHTML = "You can become Uber !";
问题出在这一行
document.querySelector("output-box").innerHTML
querySelector函数取一个选择器
改成
document.querySelector(".output-box").innerHTML
而且还能用
问题在于这些语句。document.querySelector("output-box")
你在这里找的是一个元素而不是一个类。你需要在类名前面加一个点(.),这样querySelector才能正常工作。document.querySelector(".output-box")
试试下面的代码,这将消除所有的错误:你的代码有两个问题:
1 - 你在创建输入字段之前声明了变量。
2 - 你使用querySelector的方式不对。
把js放在body标签的最后。
var username = document.getElementById("myUsername").value;
var groupIs = document.getElementById("myGroup").value;
var warnings = document.getElementById("myWarning").value;
var postCount = document.getElementById("myPostCount").value;
function uberChecker() {
if ((groupIs != ('Uber' || 'uber') && postCount > '1000') && warnings === '0') {
document.querySelector(".output-box").innerHTML = "You can become Uber !";
} else if (postCount < '1000' && warnings === '0') {
document.querySelector(".output-box").innerHTML = (username + ' You have ' + postCount + ' posts, you do not meet the requirements');
} else if (warnings != '0' && postCount > '1000') {
document.querySelector(".output-box").innerHTML = (username + ' You cannot upgrade with ' + warnings + ' warning')
} else if (postCount < '1000' && warnings != '0') {
document.querySelector(".output-box").innerHTML = (username + ' you have ' + postCount + ' posts which is less than 1000 and you have ' + warnings + '% warning. You cannot upgrade');
} else {
document.querySelector(".output-box").innerHTML = (username + ' You are already Uber');
}
}
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
<div class="blue-box"></div>
<input type="text" placeholder="Type username" id="myUsername" class="user">
<input type="text" placeholder="Type user group" id="myGroup" class="group">
<input type="text" placeholder="Type post count" id="myPostCount" class="post">
<input type="text" placeholder="Type warning level" id="myWarning" class="warning">
<div class="UsernameText">Username</div>
<div class="groupText">Group</div>
<div class="postText">Posts</div>
<div class="warningText">Warning</div>
<button type="button" onclick="uberChecker();" class="black-box">Check if you are upgradeable</button>
<div class="output-box">Result will display here</div>
<script src="script.js"></script>
</body>
</html>
将选择器条件从 ("output-box")
到 (".output-box")