Accessing a SELECT element and an array element

Question

I am trying to create a random quotes generator based on TV shows. After user selects a show and hits Submit button, the program should display a random quote depending on selected TV series. All quotes are located in their arrays.

My code is below. Would you please help me understand why it is not working and how to fix it?

<!DOCTYPE html>
<html>
<body>

<h3>A demonstration of how to access a SELECT element</h3>

<select id="mySelect" size="2">
  <option value="1">Suits</option>
  <option value="2">Supernatural</option>
</select>

<p>Click the button to select the show and display a random quote.</p>

<button onclick="myFunction();">Submit</button>

<p id="demo"></p>

<script>
function myFunction() {
    var suits = new Array("Specter is fat", "Ross is fat", "Pearsonis fat", "Litt is fat", "Zane is fat");
    var supernatural = new Array("Dean is fat", "Sam is fat", "Castiel is fat");
    var x = document.getElementById("mySelect").value;
    switch (x) {
      case 1: 
        var quote = suits[Math.floor(Math.random()*suits.length)];  
        document.getElementById("demo").innerHTML = quote;
        break;
      case 2: 
        var quote = supernatural[Math.floor(Math.random()*supernatural.length)];
        document.getElementById("demo").innerHTML = quote;
        break;
    };
}
</script>

</body>
</html>

Can you be more specific about how it "isn't working" -- just not displaying, a particular error, etc.? That can help narrow down the issue. — Erica, Feb 01 '16 at 17:51

score 1 · Accepted Answer · answered Feb 01 '16 at 18:30

1

The x value is coming in as a string, but your JavaScript switch is looking for an integer. It should work as expected if you use strings instead:

switch (x) {
    case "1":
        // stuff
    case "2":
        // stuff
}

answered Feb 01 '16 at 18:30

Erica

2,399
5
26
34

score 0 · Answer 2 · edited May 23 '17 at 10:27

You can see a good way to get the value of the selected option in this post. Your variable quote is not being set. You can see in this fiddle that your variable x is set, quote is never set so it can never be displayed.

I'm sorry I haven't much time during my break to answer this. I cannot tell you why the code inside the cases does not work. But maybe this answer will give you somewhere to start.

Accessing a SELECT element and an array element

2 Answers2