CODEWITHSUNDEEP
javascriptif-statement
Adam
Adam

Reputation: 3

Text input with IF statements

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.

Upvotes: 0

Views: 3768

Answers (4)

Seth
Seth

Reputation: 106

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!";
    }
}

Upvotes: 0

JellyRaptor
JellyRaptor

Reputation: 755

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>

Upvotes: 1

Emilio Lucas Ceroleni
Emilio Lucas Ceroleni

Reputation: 1598

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")

Upvotes: 1

Matt Spinks
Matt Spinks

Reputation: 6698

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>

Upvotes: 2

Related Questions