Multiple Variables and Prompts

Question

So basically I need to make my site turn from one image to another using JavaScript and variables after a question is answered. I will prompt the user about there mood from 1-10 an dif they pick 1-3(sad) the image changes to a sad face if they pick 4-7(neutral) the image changes to a neutral face if they pick 8-10(happy) the image on the site will change to a happy face. my code though is not working I've tried everything

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

It gives me no errors in my coding I'm using NetBeans but any number I put in the prompt the page just comes out blank.

score 3 · Answer 1 · answered Jan 29 '16 at 22:50

The issue appears to be the === operator. It checks absolute equality without type conversion.

When you enter 1 into the prompt, it is most likely recorded as "1", i.e. a string. When you're checking whether x === sad, you're checking whether "1" equals to 1 (it does not -- the first is a string, the second a number).

To fix this, either use the weaker == operator (which will convert types appropriately), or instead of assigning 1 to var sad, assign "1" instead.

score 1 · Accepted Answer · edited May 23 '17 at 12:07

1

prompt() returns a String. You should compare it to other strings if you are going to use ===. See this question Does it matter which equals operator (== vs ===) I use in JavaScript comparisons?.

Make all of your comparator variables Strings:

// 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";
}

edited May 23 '17 at 12:07

Community

1
1

answered Jan 29 '16 at 22:50

zero298

25,467
10
75
100

so i have made them all into a string the only difference is i just get the normal html neutral smile with waiting no matter what input i put in from 1- 10 this is the code i wrote: – NarinderRSharma Jan 30 '16 at 01:14
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."); if (x === sad || x === sad2 || x === sad3){ document.getElementByTagName("img").src = "s.png"} else if (x === n1 || x === n2 || x === n3 || x === n4){ document.getElementByTagName("img").src = "s.png";} else if (x === h1 || x === h2 || x === h3){ document.getElementByTagName("img").src = "h.png";} – NarinderRSharma Jan 30 '16 at 01:25
I have taken out the img href and the innerHTML as it maxed out on the number of characters i could use but i used this andstill the same thing – NarinderRSharma Jan 30 '16 at 01:26
the only difference is I get the neutral and waiting after the prompt which was in the html inittially – NarinderRSharma Jan 30 '16 at 01:26
please someone find images to replace mine and try it out and show your skills to get it right. so I may learn just as we all are as programmers/web programmers. please! – NarinderRSharma Jan 30 '16 at 01:27
remember the reason it shows the neutral and just "waiting..." under it is cause if you look above at my code the body is:
Waiting...
– NarinderRSharma Jan 30 '16 at 01:32
So i am still in need of help the strings were right but the program still does not work if you read the program problem maybe you can write your own code to dissolve this problem by your own knowledge instead of just manipulating mines. please again. – NarinderRSharma Jan 30 '16 at 01:33
okay so Here's an easier look at what I put and got no answer: – NarinderRSharma Jan 30 '16 at 21:35

Multiple Variables and Prompts

2 Answers2

Waiting...