Question

我正在为我的英语课做一个关于奇迹工作者游戏的项目。我正在为它编写一个游戏，但我无法继续，因为我的按钮不会单击，我无法输入我的文本输入。有谁知道为什么？

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>

Answer 1

如果在按钮元素上放置z-index，则可以成功单击。

button, input{
  z-index:10;
}

您可以在任何现代浏览器中使用“Inspect Element”进行调试，正如您所看到的，<p>元素与此处的许多内容重叠。通过允许堆叠（通过使用z-index），您将能够将所需元素堆叠在彼此之上和之下。

要对此进行测试，您可以使用button:hover{background:tomato}，例如，然后可以悬停并点击该项目。

Answer 2

首先，这里有一个错误的ID：

<h1>id="zescore">0</h1>

应该是：

<h1 id="zescore">0</h1>

此外，您的按钮位于后台，因此您必须在z-index中添加button属性，例如z-index: 2到您的按钮：

button{
  z-index: 2;
}

Answer 3

Dude你的脚本应该在文档准备好后运行

将您的脚本代码放入jquery或javascript函数的文档中

在加载dom之前，您无法访问任何html元素

HTML按钮不点击

3 个答案: