CODEWITHSUNDEEP
javascripthtmlcss
Jude
Jude

Reputation: 5

HTML Button not Clicking

I am working on a project about the Miracle Worker play for my english class. I'm coding a game for it, but I cannot continue because my button won't click and I can't type into my text input. Does anyone know why?

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>

Upvotes: 0

Views: 12050

Answers (3)

Vinayak Shedgeri
Vinayak Shedgeri

Reputation: 2402

Dude Your script should run once the document is ready

Put your script code inside document ready of jquery or javascript function

  • you can not acces any html element until the dom is loaded

Upvotes: 0

jbutler483
jbutler483

Reputation: 24559

If you place a z-index on the button element, you can then click successfully.

button, input{
  z-index:10;
}

enter image description here

You can debug this using the 'Inspect Element' in any modern browser, and as you can see the <p> element is overlapping a lot of the content here. By allowing for stacking (via using z-index), you will be able to stack the desired element above and below each other.

To test this then, you can use button:hover{background:tomato}, for example, and can hence hover and click on the item.

Upvotes: 0

Francisco Romero
Francisco Romero

Reputation: 13199

First of all, you have a wrong ID here:

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

should be:

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

Also, you have your button in the background so you will have to put a z-index property in your button, for example, z-index: 2 to your button:

button{
  z-index: 2;
}

Upvotes: 0

Related Questions