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

Question

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>

var codeinput = document.getElementById('codeinput').value; is read on page load. It will not magically update the variable.... Move it inside of the function..... — epascarello
– epascarello, Commented Sep 17, 2020 at 13:22
var codeinput = document.getElementById('codeinput').value; – that would belong into your function here, so that the current value gets read, when the button gets clicked. Otherwise, you are only reading the value the field had at the time this line of code executed (and that was just empty at this time.) — C3roe
– C3roe, Commented Sep 17, 2020 at 13:22
also use onclick="enterfunc()" not just func name so that JS can execute that function code. — sandeep joshi
– sandeep joshi, Commented Sep 17, 2020 at 13:25
if(document.getElementById('codeinput').value =='2147') will give your desired output — Sandrin Joy
– Sandrin Joy, Commented Sep 17, 2020 at 13:25
You can also use var codeinput = document.getElementById('codeinput'); to store the element itself, then use if (codeinput.value == '2147') to read the current value inside the function. — user5734311
– user5734311, Commented Sep 17, 2020 at 13:26

Adriatic · Accepted Answer · 2020-09-24 12:55:06Z

1

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.

edited Sep 24, 2020 at 12:55

answered Sep 17, 2020 at 13:45

Adriatic

1,2971 gold badge10 silver badges31 bronze badges

Sign up to request clarification or add additional context in comments.

6 Comments

epascarello Over a year ago

onclick="enterfunc"

Sianna Zewdie Over a year ago

hi! but, when i put in the number 2147, i get the error message saying that something is not right. could you help me please?

Adriatic Over a year ago

@SiannaZewdie maybe you can try if (codeinput == 2147) without quotes?

Adriatic Over a year ago

Can you send a link? Because the JSFiddle above doesn't work...

Adriatic Over a year ago

It does work! You still did not move your variable declaration inside the function!! Look at my code. var codeinput = document.getElementById('codeinput').value; has to be inside enterfunc().

|

Collectives™ on Stack Overflow

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

1 Answer 1

6 Comments

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

6 Comments

Related