html input field will not allow me to type in it

Beginnercoder
April 7, 2023
302 views
0 votes
2 Answers

I am making an input field inside of my html game. When an html element touches another html element, this input field, along with a submit button, a paragraph, and a header spawn with it, all contained in a div. For some reason, I can’t type into the input box.

I have seen this question appear many times on stackoverflow but the solutions didnt work for me.

I’ve tried setting the z-index to high numbers like 1000, i’ve tried making the padding 0, the margin 0, but nothing seemed to work.

I pasted the plain html on codepen, and I was able to type into the input, so something else is obstructing it but I cant figure out what it is.
I’ve noticed that the pre-built up and down arrows make the input value decrease or increase by 1, but I want to user to be able to type in a number, not use the pre-built up and down function to submit a number.!

The input’s class is "inputq" in the "equation" div. There is JavaScript but I didnt add it since I think It’s irrelevant, and it’s pretty chunky

Any tips/suggestions/answers would be greatly appreciated, thank you!!

Style.css ``` * {
  background-color: rgb(47, 49, 46);
  color: aliceblue;
  font-family: Calibri, sans-serif;
}

body,
html {
  position: fixed;
  height: 100%;
  width: 100%;
  background-repeat: no-repeat;
  background-size: cover;
  background-position: center;
  margin: 0;
}

.jotaro {
  position: relative;
  width: 150px;
  height: 200px;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  background-color: transparent;
}

.explosion {
  position: relative;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  width: 700px;
  height: 700px;
  background-color: transparent;
}

.confetti {
  position: relative;
  top: -600px;
  left: -63px;
  width: 700px;
  height: 700px;
  background-color: transparent;
}

.maincontainer {
  position: relative;
  margin-top: 60px;
  margin-left: 270px;
  width: 510px;
  height: 100px;
  justify-content: center;
}

.equations {
  width: 500px;
  height: 300px;
  background-color: rgb(199, 199, 186);
  border: 5px solid rgb(84, 68, 23);
  margin-top: 210px;
  margin-left: 270px;
}

.gameover {
  width: 500px;
  height: 450px;
  background-color: rgb(199, 199, 186);
  border: 5px solid rgb(255, 0, 0);
  margin-top: 100px;
  margin-left: 270px;
}

.gamewin {
  width: 500px;
  height: 450px;
  background-color: rgb(199, 199, 186);
  border: 5px solid rgb(36, 159, 44);
  margin-top: 100px;
  margin-left: 270px;
}

.health {
  position: relative;
  width: fit-content;
  height: 30px;
  background-color: rgb(199, 199, 186);
  border: 5px solid rgb(255, 0, 0);
  color: red;
  font-size: 70px;
  align-items: center;
  height: 50px;
  bottom: 10px;
  top: -10px;
}

.hearts {
  color: red;
  background-color: rgb(199, 199, 186);
  position: relative;
  bottom: 88px;
  height: 0px;
}

.timer {
  background-color: transparent;
  position: relative;
  width: 100px;
  height: 100px;
  top: -81px;
  left: 300px;
}

.timerimg {
  width: 90px;
  height: 84px;
  background-color: transparent;
}

.timernum {
  background-color: transparent;
  position: relative;
  top: -130px;
  left: 110px;
  color: rgb(0, 0, 0);
  font-size: 50px;
}

.timerimgsec {
  position: relative;
  background-color: transparent;
  width: 40px;
  height: 44px;
  top: 0px;
  left: 0px;
}

.timernumsec {
  position: relative;
  background-color: transparent;
  color: black;
  top: -17px;
  left: 6px;
  font-size: 25px;
}

.qtimer {
  position: relative;
  display: flex;
  background-color: transparent;
  top: -70px;
  left: 420px;
  height: 50px;
}

.bombbar {
  position: relative;
  width: fit-content;
  height: 60px;
  background-color: rgb(199, 199, 186);
  border: 5px solid rgb(0, 0, 0);
  font-size: 50px;
  align-items: center;
  left: 676px;
  bottom: 75px;
  top: -175px;
}

.bombs {
  background-color: rgb(199, 199, 186);
  position: relative;
  bottom: 55px;
  height: 0px;
}

.bomb {
  position: relative;
  top: 0;
  left: 0;
  width: 100px;
  height: 100px;
  background-color: transparent;
  animation: fuse 0.2s linear infinite;
}

.instructions {
  position: absolute;
  border: 1px solid aliceblue;
  padding: 40px;
  align-items: center;
}

.line {
  border: 0px 0px 5px aliceblue;
}

.lineq {
  border: 5px solid rgb(84, 68, 23);
  margin-top: -70px;
}

.linegameover {
  border: 5px solid rgb(255, 0, 0);
  margin-top: -70px;
}

.linegamewin {
  border: 5px solid rgb(36, 159, 44);
  margin-top: -70px;
}

.gamesep {
  position: relative;
  border: 2px solid rgb(255, 255, 255);
  top: 70px;
}

.inputq {
  position: relative;
  background-color: rgb(199, 199, 186);
  border: 5px solid rgb(84, 68, 23);
  font-size: large;
  color: rgb(84, 68, 23);
  left: 70px;
  width: 200px;
  height: 30px;
  bottom: 109px;
  z-index: 1000;
}

.playbtn {
  font-size: larger;
  width: 400px;
  border: 3px solid aliceblue;
  height: 70px;
}

.btnq {
  position: relative;
  background-color: rgb(199, 199, 186);
  border: 5px solid rgb(84, 68, 23);
  font-size: large;
  color: rgb(84, 68, 23);
  margin-top: 140px;
  margin-left: 100px;
  width: 100px;
  height: 40px;
  bottom: 109px;
}

.playagainbtn {
  position: relative;
  background-color: rgb(199, 199, 186);
  border: 5px solid rgb(255, 30, 0);
  font-size: large;
  color: rgb(84, 68, 23);
  margin-top: 130px;
  margin-left: 145px;
  width: 200px;
  height: 40px;
  bottom: 100px;
}

.playagainbtnwin {
  position: relative;
  background-color: rgb(199, 199, 186);
  border: 5px solid rgb(36, 159, 44);
  font-size: large;
  color: rgb(84, 68, 23);
  margin-top: 130px;
  margin-left: 145px;
  width: 200px;
  height: 40px;
  bottom: 153px;
  top: -849px;
}

.title {
  font-weight: bold;
  font-size: xx-large;
  text-align: center;
  outline: black
}

.para {
  font-size: medium;
}

.parabig {
  align-self: center;
  text-align: center;
  font-size: larger;
  text-shadow: 0px 0px 4px aliceblue;
}

.paraq {
  position: relative;
  margin-top: 0px;
  background-color: rgb(199, 199, 186);
  color: rgb(84, 68, 23);
  text-align: center;
  font-size: xx-large;
  font-weight: bold;
  margin: 17px;
  top: -13px;
}

.paragameover {
  margin-top: 0px;
  background-color: rgb(199, 199, 186);
  color: rgb(255, 0, 0);
  text-align: center;
  font-size: xx-large;
  font-weight: bold;
}

.paragamewin {
  margin-top: 0px;
  background-color: rgb(199, 199, 186);
  color: rgb(36, 159, 44);
  text-align: center;
  font-size: xx-large;
  font-weight: bold;
}

.paraqq {
  background-color: rgb(199, 199, 186);
  color: rgb(84, 68, 23);
  text-align: center;
  font-size: 50px;
  font-weight: bold;
}

.baddeci {
  background-color: rgb(199, 199, 186);
  color: rgb(121, 18, 18);
  text-align: center;
  font-size: 30px;
  font-weight: bold;
  margin-bottom: 70px;
}

.gooddeci {
  background-color: rgb(199, 199, 186);
  color: rgb(28, 85, 32);
  text-align: center;
  font-size: 34px;
  font-weight: bold;
}

.baddecibomb {
  background-color: rgb(199, 199, 186);
  color: rgb(121, 18, 18);
  text-align: center;
  font-size: 37px;
  font-weight: bold;
}

.gooddecihearts {
  background-color: rgb(199, 199, 186);
  color: rgb(28, 85, 32);
  text-align: center;
  font-size: 37px;
  font-weight: bold;
  margin: 0;
}

.anim {
  animation: hover 1s linear infinite;
}

.wrong {
  box-shadow: 0px 0px 20px red;
}

.right {
  box-shadow: 0px 0px 20px rgb(101, 255, 101);
}

.anim2 {
  animation: losehealth 0.5s linear infinite;
}

.anim3 {
  animation: expand 1s linear infinite;
}

.anim4 {
  animation: wobble 1s linear infinite;
}

.almostblown {
  text-shadow: 0px 0px 10px red;
  color: red;
}

.hide {
  display: none;
}

@keyframes hover {
  0%,
  100% {
    transform: translateY(0)
  }
  50% {
    transform: translateY(-5px)
  }
}

@keyframes fuse {
  0%,
  100% {
    transform: translateX(0)
  }
  50% {
    transform: translateX(-3px)
  }
}

@keyframes losehealth {
  0%,
  100% {
    transform: translateX(0)
  }
  50% {
    transform: translateX(-5px)
  }
}

@keyframes expand {
  0%,
  100% {
    transform: scale(1)
  }
  50% {
    transform: scale(1.1)
  }
}

@keyframes wobble {
  0% {
    transform: rotate(0deg);
  }
  25% {
    transform: rotate(5deg);
  }
  50% {
    transform: rotate(0eg);
  }
  75% {
    transform: rotate(-5deg);
  }
  100% {
    transform: rotate(0deg);
  }
}

```

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>MathMan</title>
  <link rel="stylesheet" href="/Style.css">

</head>

<body>
  <audio loop id="gamesong" src="/static/Hitman.mp3"></audio>
  <audio loop id="quessong" src="/static/Sneaky-Snitch.mp3"></audio>

  <audio loop id="happyendingsong" src="/static/Cipher2.mp3"> </audio>

  <audio loop id="badendingsong" src="/static/Black-Vortex.mp3"></audio>

  <audio loop id="bombexplosion" src="/static/bombexplosion.wav"></audio>

  <audio id="bombdiffused" src="/static/Bombdiffused.wav"></audio>

  <audio id="finalexplosion" src="/static/explosionfinal.wav"></audio>

  <audio id="finalcheer" src="/static/wootwoot.wav"></audio>

  <h1 id="title" class="title">MathMan</h1>

  <hr id="line" class="line">
  <hr class="gamesep hide" id="gameline">

  <div class="equations" id="equations">
    <h6 class="paraq">Solve the equation!</h6>
    <div class="qtimer">

      <img class="timerimgsec" id="timerimgsec" src="/static/Timer.png" alt="">
      <p class="timernumsec" id="timernumsec">20</p>
    </div>

    <hr class="lineq">

    <p class="paraqq" id="equationq"> </p>
    <input type="number" class="inputq" id="equationSub">
    <button class="btnq" id="btnQ">Submit</button>
  </div>

  <div class="gameover hide" id="gameover">
    <h6 class="paragameover">💀YOU DIED💀</h6>
    <hr class="linegameover">
    <p class="baddeci" id="baddecisec"> Unfortunatley, you weren't able to difuse the bomb, and lost your last life. The town was then blown up by the other bombs.
      <br>
      <br>
      <hr class="linegameover">
      <p class="baddecibomb" id="deciderbad">
        Bombs diffused:
      </p>
      <button class="playagainbtn" id="restart">Play again</button>
  </div>

  <div class="gamewin hide" id="gamewin">
    <h6 class="paragamewin"> 🎊YOU WON!🎊</h6>
    <hr class="linegamewin">
    <p class="gooddeci"> You were able to save the village from the bombs using your fantastic math skills. Mathman is recongnized as an international hero for saving a village using math!
      <br>
      <br>

      <hr class="linegamewin">
      <p class="gooddecihearts" id="decidergood">
        Lives left:
      </p>
      <p class="gooddecihearts" id="decidergoodtime">
        Time:
      </p>
      <img class="confetti hide" id="confetti" src="/static/confetti.gif" alt="">

      <button class="playagainbtnwin" id="restart1">Play again</button>

  </div>

  <div class="health" id="healthbar">
    <p class="hearts" id="hearts">
      ♥♥♥
    </p>
  </div>
  <div id="timer" class="timer hide">
    <img class="timerimg" src="/static/Timer.png" alt="">
    <p class='timernum' id="timernum">10</p>

  </div>
  <div class="bombbar" id="bombbar">
    <p class="bombs" id="bombs">
      💣💣💣💣💣
    </p>
  </div>

  <div class="maincontainer" id="maincontainer">
    <div class="instructions" id="instructions">
      <H6 class="parabig">HOW TO PLAY:</H6>
      <p class="para">
        Welcome to MathMan. In this game you are a superhero, and <br> a villian has planted 5 devastating bombs all over the city!! <br> You are a beginner superhero, that can solve problems using math! <br> Your goal is to diffuse the 5 bombs, and save
        the town !<br> To deactivate each bomb, you will be prompted with math<br> equations, and you have to get it right. Don't take too long, or the bomb will automatically blow up and you will lose a life! <br> If you get the equation wrong you will
        lose a life. You only have <br> 3 lives, so be careful!<br> Press "Start Game" to begin.
      </p>
      <button class="playbtn" id="playBtn">Start Game</button>
    </div>

  </div>
  <img class="bomb" id="bomb" src="static/Bomb.png" alt="">
  <img class="jotaro" id="idleJotaro" src="static/image-removebg-preview__3_-removebg-preview.png">
  <img class="explosion hide" id="explosion" src="/static/explosion.gif" alt="">

  <script src="Home.js"></script>
</body>

</html>

Answers

Chosen as BEST ANSWER
- Beginnercoder
- April 8, 2023 at 6:09 pm
- 0 votes
0
The answer to this question was very unexpected.

I removed the preventdefault() in my js code.

Once I removed it, it let me type into the input box. I found this out by searching how to prevent a user from typing into an inputbox and I saw that they used preventdefault. So I removed it and I was somehow able to type.

Thank you everyone for helping me come to this conclusion!

(Edit)

- ashirhusaain
- April 7, 2023 at 11:26 pm
- 0 votes
0
Try this for input field issue:
```
.inputq::-webkit-inner-spin-button {
  -webkit-appearance: none;
  margin: 0;
}
```
Login or Signup to reply.

Please signup or login to give your own answer.

Click here to cancel reply.