多变量和提示

Question

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

    <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() returns 一个字符串。如果您要使用 ===，您应该将它与其他字符串进行比较。看到这个问题 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";
}

多变量和提示

Multiple Variables and Prompts

javascript

image

variables

var

prompt