CODEWITHSUNDEEP
javascripthtml
Sianna Zewdie
Sianna Zewdie

Reputation: 89

How do I create a javascript if statement depending on my html input?

I'm new to javascript. I'm trying to make a laser tag game to share with my friends. However, I want it to be like Kahoot It where I can enter a game PIN to take you to the right game. However, I do not know how to tell my javascript which game I want to be taken to. Here is my code:

body {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  background-color: black;
}

.logo {
  width: 50%;
  display: block;
  margin-left: auto;
  margin-right: auto;
  margin-top: 7%;
}

.codeinput {
  width: 20%;
  size: 30%;
  display: block;
  margin-left: auto;
  margin-right: auto;
}

.codeinput:focus {
  outline: none;
}

.enterbutton {
  border: none;
  background-color: #018D94;
  padding: 1% 4%;
  border-radius: 5%;
  display: block;
  margin-left: auto;
  margin-right: auto;
  margin-top: 2%;
}

.enterbutton:hover {
  background-color: #036266;
}
<!DOCTYPE html>
<html lang="en" dir="ltr">

<head>
  <meta charset="utf-8">
  <title>Laser Tag</title>
  <link rel="stylesheet" href="css/index.css">
</head>

<body>
  <img src="img/logo.png" class="logo" alt="Laser Tag">
  <input type="text" name="" value="" placeholder="Game PIN" class="codeinput" id="codeinput">
  <button type="button" name="button" class="enterbutton" onclick="enterfunc">ENTER</button>
</body>
<script src="js/index.js" charset="utf-8"></script>
<script type="text/javascript">
  var codeinput = document.getElementById('codeinput').value;

  function enterfunc() {
    if (codeinput == '2147') {
      alert('Great! This works!');
    } else {
      alert('Hmm...something in your code is not right');
    }

  }
</script>

</html>

Upvotes: 0

Views: 500

Answers (1)

Adriatic
Adriatic

Reputation: 1287

You just have to move var codeinput = document.getElementById('codeinput').value; into your function like this:

function enterfunc() {

  var codeinput = document.getElementById('codeinput').value;

  if (codeinput == '2147') {
    alert('Great! This works!');
  } else {
    alert('Hmm...something in your code is not right');
  }

}

This way, always the current input is read.

Also you have to call the function correctly in your HTML:

<button type="button" name="button" class="enterbutton" onclick="enterfunc()">ENTER</button>

Since enterfunc() is a function, you have to use the brackets inside the button tag.

Upvotes: 1

Related Questions