Text input with IF statements

Question

I am creating a very simple story based "game" where there is a question with choices (not radio buttons etc) and the user has to type in the choices that's been given to them. I am not very good with JavaScript as you will see...

<!DOCTYPE HTML>
<html>

<head>
<script type="text/javascript" src="gamescript.js"></script>
</head>


<body>

<p id ="door"> Which door do you wish to enter? Door 1 or Door 2? </p>

<input id="myInput" type="text">

<button onclick="myFunction()">Enter</button>

<script>
function myFunction(){
    var door = document.getElementById("myInput").value;
    if (door == "Door 1", "door 1"){
        document.getElementById("door").innerHTML = "You have entered" + door;
    }else if (door == "Door 2", "door 2"){
        document.getElementById("door").innerHTML = "You have entered" + door;
    }else{
        document.getElementById("door").innerHTML = "You must enter a door!"
    }
}

</script>

</body>
</html>

I am not getting any errors but when I type in something random/or leave blank, it's meant to say "Choose a door" but it's displaying anything i type into the text box. This code might be wrong, i'm guessing it most likely is..I didn't want to come online for help but have no one else to ask. All help is appreciated. Thank you.

door == "Door 1", "door 1" <-- learn what the comma operator does. It does not do what you think it does. — epascarello
– epascarello, Commented Dec 4, 2017 at 21:39

Matt Spinks · Accepted Answer · 2017-12-04 21:21:21Z

2

Your syntax on your if statements is wrong. Change your if statements to use proper "or" syntax:

function myFunction(){
    var door = document.getElementById("myInput").value;
    if (door == "Door 1" || door == "door 1"){
        document.getElementById("door").innerHTML = "You have entered" + door;
    }else if (door == "Door 2" || door == "door 2"){
        document.getElementById("door").innerHTML = "You have entered" + door;
    }else{
        document.getElementById("door").innerHTML = "You must enter a door!"
    }
}

<body>

<p id ="door"> Which door do you wish to enter? Door 1 or Door 2? </p>

<input id="myInput" type="text">

<button onclick="myFunction()">Enter</button>


</body>

answered Dec 4, 2017 at 21:21

Matt Spinks

6,7404 gold badges32 silver badges57 bronze badges

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

4 Comments

epascarello Over a year ago

why even use the or, just lower case the string and compare.

Adam Over a year ago

Thank you so much for the reply and help!! If the user was to enter Door 1, do i repeat the process for another question?

Matt Spinks Over a year ago

Not sure if I can answer that. That just depends on how you want your game to flow. The key here is that there was a syntax error. There probably was an error showing up, but it was just being suppressed. I would suggest using the F12 debug tools to investigate things like this.

Adam Over a year ago

I was using the F12 in Chrome but no errors showed up..why i came here to ask lol, as I knew something wasn't right but had no one to ask. Anyway, thanks a lot for help and everyone else who helped!

JellyRaptor · Accepted Answer · 2017-12-04 21:30:06Z

Rather than execute the same line of code in separate conditions, why not utilize a simple switch?

<!DOCTYPE HTML>
<html>

<body>

<p id ="door"> Which door do you wish to enter? Door 1 or Door 2? </p>

<input id="myInput" type="text">

<button onclick="myFunction()">Enter</button>

<script>
    function myFunction(){
        var door = document.getElementById("myInput").value;
        switch(door.toLowerCase()) {
            case 'door 1':
            case 'door 2':
                document.getElementById("door").innerHTML = "You have entered" + door;
                break;
            default:
                document.getElementById("door").innerHTML = "You must enter a door!"
        }
    }

</script>

</body>
</html>

Emilio Lucas Ceroleni · Accepted Answer · 2017-12-04 21:26:09Z

You could make use ot toLowerCase() and then compare door to "door 1", etc.

function myFunction(){
var door = document.getElementById("myInput").value.toLowerCase();

if (door == "door 1"){
    document.getElementById("door").innerHTML = "You have entered" + door;
}else if (door == "door 2"){
    document.getElementById("door").innerHTML = "You have entered" + door;
}else{
    document.getElementById("door").innerHTML = "You must enter a door!"
}

In case you need, you can use || (or) logical operator and evaluate if (door == "Door 1" || door =="door 1")

Seth · Accepted Answer · 2017-12-04 21:41:23Z

The comma operator , evaluates each of its operands (from left to right) and returns the value of the last operand. Your issue is that the first if check is always returning true.

function myFunction(){
    var doorVal = document.getElementById("myInput").value;
    var door = document.getElementById("door");
    // this could just as well be an object
    var acceptedResponses = ["Door1", "door1", "Door2", "door2"];
    if (acceptedResponses.indexOf(doorVal) !== -1) {
      door.innerHTML = "You have entered " + door;
    } else {
      door.innerHTML = "You must enter a door!";
    }
}

You might even just want to use a regex if they are going to be so similar.

Collectives™ on Stack Overflow

Text input with IF statements

4 Answers 4

4 Comments

Comments

Comments

1 Comment

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

4 Comments

Comments

Comments

1 Comment

Related