我正在为我的英语课做一个关于奇迹创造者戏剧的元素。我正在为它编写游戏代码，但我无法继续，因为我的按钮无法点击，而且我无法在文本输入中输入内容。有谁知道为什么吗？
body {
animation-name: example;
animation-duration: 10s;
animation-iteration count: 1000000000000000000000000000000000000000000000000000000000000;
}
@keyframes example {
0% {
background-color: turquoise;
}
25% {
background-color: lightblue;
}
50% {
background-color: blue;
}
75% {
background-color: teal;
}
100% {
background-color: cyan;
}
}
h1 {
font-family: marker felt;
position: relative;
bottom: 90px;
}
.one {
background-color: lime;
}
.two {
background-color: green;
}
div {
height: 67px;
width: 67px;
position: relative;
left: 450px;
bottom: 935px;
font-family: marker felt;
}
#u {
position: relative;
left: 385px;
top: 5px;
}
button {
background: black;
color: white;
height: 50px;
width: 100px;
font-family: marker felt;
position: relative;
bottom: 75px;
}
p {
font-family: marker felt;
text-align: right;
position: relative;
bottom: 475px;
}
input {
position: relative;
bottom: 75px;
}<!DOCTYPE html>
<html>
<head>
<title>
The Miracle Worker Game
</title>
<script>
var pos = 0;
var ans = document.getElementById("answer").value;
var sco = 0;
function myTurn() {
if (pos == 0) {
if (ans == 2) {
sco++;
document.getElementById("zescore").innerHTML = sco;
}
}
}
</script>
</head>
<body>
<div id="u">
<img src="https://upload.wikimedia.org/wikipedia/commons/thumb/8/85/Smiley.svg/2000px-Smiley.svg.png" alt="smile" height=50 width=50 />
</div>
<h1>The Miracle Worker Game<br>By: Jude Farley</h1>
<h1>Score:</h1>
<h1>id="zescore">0</h1>
<h1><br><input id="answer" name="Text1" type="text" value="Ans: (True=1/False=2)"/><br><button onclick="myTurn">Submit and Move</button></h1>
<p>
Questions:
<br>
<br>1. Helen had meningitis as a baby and went blind and deaf (false)
<br>
<br>2. Kate wants to Help Helen and
<br>contacts the Perkins Institute in New York (false)
<br>
<br>3. The principal, Anagnos, sends Annie Sullivan to Helen (true)
<br>
<br>4. When Annie comes, Helen has been disciplined but needs to learn (false)
<br>
<br>5. Annie starts attempting to teach Helen sign language (true)
<br>
<br>6. Helen does not understand things have names (true)
<br>
<br>7. Annie then tries to teach Helen manners (true)
<br>
<br>8. The Kellers agree with Annie's teaching methods and
<br>let her teach Helen any way she wants (false)
<br>
<br>9. Annie takes Helen to the garden house to teach her for 2 weeks (true)
<br>
<br>10. Annie runs water over Helen's hand and Helen
<br>understands language (true)</p>
<div class="one">1</div>
<div class="two">2</div>
<div class="one">3</div>
<div class="two">4</div>
<div class="one">5</div>
<div class="two">6</div>
<div class="one">7</div>
<div class="two">8</div>
<div class="one">9</div>
<div class="two">10</div>
</body>
</html>最佳答案
如果你放置一个 z-index在按钮元素上，然后你可以点击成功。
button, input{
z-index:10;
}
您可以在任何现代浏览器中使用“检查元素”对其进行调试，并且您可以看到 <p>元素在这里重叠了很多内容。通过允许堆叠(通过使用 z-index )，您将能够将所需元素堆叠在彼此之上和之下。
然后要对此进行测试，您可以使用 button:hover{background:tomato} ，例如，因此可以悬停并单击该元素。
关于javascript - HTML 按钮没有点击，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/37169488/