多个变量和提示

Question

所以基本上我需要在回答问题后使用 JavaScript 和变量让我的网站从一张图片转到另一张图片。我会提示用户从 1-10 的情绪，如果他们选择 1-3（悲伤），如果他们选择 4-7（中性），图像会变成悲伤的脸 如果他们选择 8-，图像会变成中性的脸10（快乐）网站上的图像会变成一张快乐的脸。我的代码虽然不起作用，但我已经尝试了一切

    <head>
    <title>Mood</title>
    <meta charset="UTF-8">
    <script>          
        var sad = 1 , sad2 = 2, sad3 = 3; 
        var n1 = 4, n2 = 5, n3 = 6, n4 = 7;
        var h1 = 8, h2 = 9, h3 = 10;  

        var x = prompt("What is your mood from 1-10? 1 being sad, 10 being Happy.","What is your mood?"); 
            if(x === sad || x === sad2 || x === sad3){
                document.getElementByTagName("img").src = "sad.png";
                document.getElementById("msg").innerHTML = "Sad.";
                document.getElementById("msg").href = "http://www.sad.com";
            }
            else if(x === n1 || x === n2 || x === n3 || x === n4){
                document.getElementByTagName("img").src = "neutral.png";
                document.getElementById("msg").innerHTML = "Neutral.";
                document.getElementById("msg").href = "http://www.neutral.com";
            }
            else if(x === h1 || x === h2 || x === h3){
                document.getElementByTagName("img").src = "happy.png";
                document.getElementById("msg").innerHTML = "Happy.";
                document.getElementById("msg").href = "http://www.happy.com";
            }
    </script>
</head>
<body style="text-align:center">
    <img src="neutral.png">
    <h1><a id="msg" href="">Waiting...</a></h1>
</body>

在我使用 NetBeans 的编码中没有出现任何错误，但我在提示中输入的任何数字都会显示为空白。

Answer 1

问题似乎是=== 运算符。它在没有类型转换的情况下检查绝对相等。

当你在提示符中输入 1 时，它很可能被记录为“1”，即一个字符串。当您检查是否x === sad 时，您正在检查“1”是否等于 1（它不 - 第一个是字符串，第二个是数字）。

要解决此问题，请使用较弱的 == 运算符（它将适当地转换类型），或者不将 1 分配给 var sad，而是分配 "1"。

Answer 2

prompt() 返回一个字符串。如果要使用===，则应将其与其他字符串进行比较。看到这个问题Does it matter which equals operator (== vs ===) I use in JavaScript comparisons?。

将所有比较器变量设为字符串：

// Make Strings
var sad = "1",
    sad2 = "2",
    sad3 = "3";
var n1 = "4",
    n2 = "5",
    n3 = "6",
    n4 = "7";
var h1 = "8",
    h2 = "9",
    h3 = "10";
//

var x = prompt("What is your mood from 1-10? 1 being sad, 10 being Happy.", "What is your mood?");
if (x === sad || x === sad2 || x === sad3) {
    document.getElementByTagName("img").src = "/img/ico/favicon.png";
    document.getElementById("msg").innerHTML = "Sad.";
    document.getElementById("msg").href = "http://www.sad.com";
} else if (x === n1 || x === n2 || x === n3 || x === n4) {
    document.getElementByTagName("img").src = "/img/ico/favicon.png";
    document.getElementById("msg").innerHTML = "Neutral.";
    document.getElementById("msg").href = "http://www.neutral.com";
} else if (x === h1 || x === h2 || x === h3) {
    document.getElementByTagName("img").src = "/img/ico/favicon.png";
    document.getElementById("msg").innerHTML = "Happy.";
    document.getElementById("msg").href = "http://www.happy.com";
}