HTML按钮未单击
[英]HTML Button not Clicking
问题描述
我正在为我的英语课开展有关奇迹工人戏剧的项目。 我正在为此游戏编写代码，但由于按钮无法点击且无法在文本输入中键入内容，因此无法继续进行。 有人知道为什么吗？
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>
3 个解决方案
解决方案1
1 已采纳 2016-05-11 17:34:01
如果将z-index放置在按钮元素上，则可以成功单击。
button, input{
z-index:10;
}
您可以在任何现代浏览器中使用“检查元素”进行调试，并且您可以看到<p>元素在这里与很多内容重叠。 通过允许堆叠（通过使用z-index ），您将能够在彼此之上和之下堆叠所需的元素。
要对此进行测试，可以使用例如button:hover{background:tomato} ，因此可以将其悬停并单击该项目。
解决方案2
0 2016-05-11 17:35:48
首先，您在这里输入了错误的ID ：
<h1>id="zescore">0</h1>
应该：
<h1 id="zescore">0</h1>
此外，你有你的背景按钮，你将不得不把z-index财产在你的button ，例如， z-index: 2到您的按钮：
button{
z-index: 2;
}
解决方案3
0 2016-05-11 17:56:37
当文档准备好后，您的脚本应该运行
将您的脚本代码放在文档中，以准备使用jquery或javascript函数
- 在加载dom之前，您无法访问任何html元素
按钮未单击 HTML 和 JavaScript
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.