Question

我正在尝试创建一个基于电视节目的随机报价生成器。用户选择节目并点击“提交”按钮后，程序应根据所选的电视剧显示随机报价。所有引号都位于其数组中。

我的代码如下。你能帮我理解它为什么不起作用以及如何解决它？

<!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>

Answer 1

x值以字符串形式出现，但您的JavaScript switch正在查找整数。如果您使用字符串，它应该按预期工作：

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

Answer 2

您可以在此post中看到获取所选选项值的好方法。您的变量quote未设置。您可以在此fiddle中看到您的变量x已设置，quote从未设置，因此永远无法显示。

对不起，我在休息期间没有多少时间来回答这个问题。我无法告诉你为什么案例中的代码不起作用。但也许这个答案会让你有个好的开始。

访问SELECT元素和数组元素

2 个答案: