Estoy trabajando en un proyecto sobre la obra Miracle Worker para mi clase de inglés. Estoy codificando un juego para él, pero no puedo continuar porque mi botón no hace clic y no puedo escribir en mi entrada de texto. ¿Alguien sabe por qué?

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>
0
Jude 11 may. 2016 a las 20:27

3 respuestas

La mejor respuesta

Si coloca un z-index en el elemento del botón, puede hacer clic con éxito.

button, input{
  z-index:10;
}

enter image description here

Puede depurar esto utilizando el 'Elemento de inspección' en cualquier navegador moderno, y como puede ver, el elemento <p> se superpone a una gran parte del contenido aquí. Al permitir el apilamiento (mediante el uso de z-index), podrá apilar el elemento deseado uno encima del otro.

Para probar esto, puede usar button:hover{background:tomato}, por ejemplo, y, por lo tanto, puede desplazarse y hacer clic en el elemento.

1
jbutler483 11 may. 2016 a las 17:47

En primer lugar, tiene un ID incorrecto aquí:

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

Debe ser:

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

Además, tiene su botón en segundo plano, por lo que deberá colocar una propiedad z-index en su button, por ejemplo, z-index: 2 en su botón:

button{
  z-index: 2;
}
0
Francisco Romero 11 may. 2016 a las 17:35

Amigo Tu script debería ejecutarse una vez que el documento esté listo

Ponga su código de script dentro del documento listo para la función jquery o javascript

  • no puede acceder a ningún elemento html hasta que se cargue el dom
0
Vinayak Shedgeri 11 may. 2016 a las 17:56