How To Have More Than One If statement in an input in JavaScript

Question

I want there to be more than one if-else statements in one input, when I use this code only how tall is the gateway arch will get an alert and not how tall are the pyramids.

Is this possible anyone?

document.getElementById("button").onclick = function() {

    if (document.getElementById("ask").value == "how tall are the pyramids") {

        alert("146.5 meters");

    } else {
        alert("How should I know");
    }

}

if (document.getElementById("ask").value == "how tall is the gateway arch") {

    alert("630 feet");

} else {
    alert("How should I know");
}

}

You closed your onclick early, notice the } after the else { ... }. — Spencer Wieczorek
– Spencer Wieczorek, Commented Sep 5, 2015 at 3:02

Anik Islam Abhi · Accepted Answer · 2015-09-05 03:03:52Z

1

You can use as many if as you wish

Try like this

var ask = document.getElementById("ask").value;
if (ask == "how tall are the pyramids") {
    alert("146.5 meters");
} else if (ask == "how tall is the gateway arch") {
    alert("630 feet");
} else {
    alert("How should I know");
}

Or you can use switch..case

like this

var ask = document.getElementById("ask").value;
switch (ask) {
    case "how tall are the pyramids":
        alert("146.5 meters");
        break;
    case "how tall is the gateway arch":
        alert("630 feet")
        break;
    default:
        alert("How should I know");
}

edited Sep 5, 2015 at 3:03

answered Sep 5, 2015 at 2:58

Anik Islam Abhi

25.4k8 gold badges61 silver badges82 bronze badges

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

Comments

nnnnnn · Accepted Answer · 2015-09-05 03:00:15Z

Just use an if / else if / else construction. You can have as many else ifs as you like before the final (optional) else.

And rather than using getElementById() multiple times on the same input, just store the current value in a variable.

Note also that you didn't pair up your curly brackets properly.

document.getElementById("button").onclick = function() {

    var question = document.getElementById("ask").value;

    if (question == "how tall are the pyramids") {
        alert("146.5 meters");
    } else if (question == "how tall is the gateway arch") {
        alert("630 feet");
    } else {
        alert("How should I know");
    }
}

Or you could use a switch statement:

switch (question) {
    case "how tall are the pyramids":
        alert("146.5 meters");
        break;
    case "how tall is the gateway arch":
        alert("630 feet");
        break;
    case "What is yellow and dangerous?":
        alert("Shark infested custard");
        break;
    default:
        alert("How should I know?");
        break;
}

when is it beneficial to use a switch over an if statement for these situations? is there a performance benefit? functionality benefit?
@Dave - It's more a style preference. Some people (including me) find it easier to read once you go beyond two or three cases. It also makes it clear that all of the possibilities are testing the same variable, whereas in an if/else if/else if/else structure each one could potentially test something completely different.

2 revs · Accepted Answer · 2015-09-05 03:08:50Z

0

You can use a switch statement like this :

switch(document.getElementById("ask").value) {
  case "how tall are the pyramids":    alert("146.5 meters"); break;
  case "how tall is the gateway arch": alert("630 feet"); break;
  default:                             alert("how should I know");
}

edited Sep 5, 2015 at 3:08

community wiki

2 revs
HamsterMuffin

1 Comment

Anik Islam Abhi Over a year ago

may be default don't need break :)

Marios Nikolaou · Accepted Answer · 2015-09-05 03:29:51Z

0

It would be better to add onclick event in button eg.

<button onclick="function();">Click me</button>

Javascript

<script type="text/javascript">

 function name(){

    var data = document.getElementById("ask").value;

    switch(data){
       case "how tall are the pyramids": alert('msg'); break;
        .
        .
        .
       default: alert('How should I know?'); break;
    }

 } 

</script>

Less code and clean , hope it helps

answered Sep 5, 2015 at 3:29

Marios Nikolaou

1,3361 gold badge15 silver badges27 bronze badges

Collectives™ on Stack Overflow

How To Have More Than One If statement in an input in JavaScript

4 Answers 4

Comments

2 Comments

1 Comment

Comments

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

Comments

2 Comments

1 Comment

Comments

Related