我有一个小的HTML文件，当我在输入字段中输入一个数字时，它的onkeyup属性会触发一个按钮
链接在这里： https://www.w3schools.com/code/tryit.asp?filename=G8P7G9W1MFF4
<!DOCTYPE html>
<html>
<head>
</head>
<body>
<input type=number min="1" max="5" value="1" class="example" name=text onKeyUp=myFunction();>
<button id="myBtn" onclick="javascript:alert('Hello World!')">Try it</button>
<script>
function myFunction() {
var x = document.getElementsByClassName("example");
if (x[0].value > 0) {
document.getElementById("myBtn").click();
}
}
</script>
</body>
</html>当我在输入字段中键入时，该函数会正确触发，但我想知道为什么箭头也不会触发该函数。
因为旋转按钮不是键，因此不会注册键启动事件。但是，您可以注册input事件，该事件将在使用按钮时触发。
此外，您正在使用一些25 +年前的语法，您确实应该放弃这些语法。不要使用 HTML 设置事件，也不要使用.getElementsByClassName()。
<!DOCTYPE html>
<html>
<head>
<title>Fun with Events</title>
</head>
<body>
<input type=number min="1" max="5" value="1" class="example" name="text">
<button id="myBtn">Try it</button>
<script>
// Get your element references just once:
let input = document.querySelector("input.example");
let btn = document.getElementById("myBtn");
// Register event handlers
input.addEventListener("keyup", myFunction);
input.addEventListener("input", myFunction);
function myFunction() {
if(input.value > 0) {
document.getElementById("myBtn").click();
}
}
btn.addEventListener("click", function(){
alert('Hello World!');
});
</script>
</body>
</html>你应该使用oninput而不是onKeyUp：
<!DOCTYPE html>
<html>
<head>
</head>
<body>
<input type=number min="1" max="5" value="1" class="example" name=text oninput=myFunction();>
<button id="myBtn" onclick="javascript:alert('Hello World!')">Try it</button>
<script>
function myFunction() {
var x = document.getElementsByClassName("example");
if (x[0].value > 0) {
document.getElementById("myBtn").click();
}
}
</script>
</body>
</html>嗨，您可以使用id代替class，如下所示：
const input = document.getElementById("myInput");
const btn = document.getElementById("myButton");
const myFunction = () => {
if(input.value > 0) {
btn.click();
}
}
input.addEventListener("keyup", myFunction);
input.addEventListener("input", myFunction);
btn.addEventListener("click", () => console.log("myButton clicked"));<input id="myInput" type=number min="1" max="5" value="1" class="example" name="text">
<button id="myButton">Try it</button>