javascript - 访问 SELECT 元素和数组元素

标签 javascript html dom

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

我的代码如下。您能帮我理解为什么它不起作用以及如何修复它吗?

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

最佳答案

x 值作为字符串传入,但您的 JavaScript switch 正在寻找整数。如果您使用字符串,它应该按预期工作:

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

关于javascript - 访问 SELECT 元素和数组元素,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/35136993/

相关文章:

javascript - Angular 将 ViewChild 绑定(bind)到类中的属性

javascript - 滚动时创建文本拖尾效果?

javascript - 仅展开父级内的子 Div

javascript - 使用 node-http-proxy 转发每个请求

javascript - 应用制作者 : Multiple filters from a search bar on a table?

html - 下方带有标签的水平复选框布局

HTML5 getCurrentPosition 与 meteor

javascript - 按需使用 javascript 强制重绘 DOM

javascript - 呈现为未定义,无法完全找出错误

javascript - 使用 JavaScript 向下钻取选择选项