If statements aren't functioning correctly

Question

I am creating a simple website that takes a randomly generated number and based on that number, it will change the text of a paragraph accordingly. I was testing for null values, which was resolved. However, the text is supposed to be capitalized or not based on whether it goes at the beginning or end of the sentence. I cannot seem to resolve this. The link to my jsfiddle is below:

https://jsfiddle.net/MCBlastoise/n2vh40ah/

Also below is my code snippet:

 .heading { text-align: center; font-family: Courier New; color: green; font-weight: bold; } .button { width: 250px; height: 250px; border-style: solid; border-color: red; border-width: 5px; border-radius: 60px; margin: auto; text-align: center; position: relative; } .button:hover { background-color: #7CFC00; cursor: pointer } .button-text { font-family: Courier New; color: #9400D3; font-size: 76px; line-height: 140%; } .text { color: red; font-family: Futura, Trebuchet MS, Arial, sans-serif; font-size: 21px; } #compliment { text-align: center; font-family: Candara, Calibri, Segoe, Segoe UI, Optima, Arial, sans-serif; color: #ffd400; font-size: 40px; font-weight: bold; margin-top: -20px; } .hover { width: 108px; height: 100px; background-color: orange; border-style: solid; border-color: black; border-width: 5px; text-align: center; margin-top: -30px; margin-left: 1175px; position: absolute; } .block-text { color: red; font-family: Futura, Trebuchet MS, Arial, sans-serif; font-size: 16px; font-weight: bold; }

 <!DOCTYPE html> <html> <head> <link type="text/css" rel="stylesheet" href="Complement.css"> <title>The Compliment Machine</title> </head> <body> <h2 class="heading">The Compliment Machine</h2> <p class="text">In the interest of spreading holiday cheer, I have designed this website with one goal in mind. With the assumption that you have already inputted your name, pressing the button below will randomly generate a compliment. Hopefully, this little experiment will brighten up your day.</p> <div class="button" onclick="inspire()" id="disappear"> <span class="button-text">Click me!</span> </div> <br style="line-height:500%"> <p id="compliment"></p> <script> var userName = prompt("What is your name?"); var compliment1 = "Have a nice day"; var compliment2 = "you contribute to society"; var compliment3 = "Always be yourself"; var compliment4 = "you are a wonderful person"; var compliment5 = "Keep up the good work"; var compliment6 = "never stop believing in yourself"; var compliment7 = "you have a great sense of humor"; var compliment8 = "You should feel proud of yourself"; var compliment9 = "Never stop trying"; var compliment10 = "you are a winner"; </script> <script> function inspire() { var result = Math.random(); //This code block checks for null, undefined, and other falsy values in the prompt. if (userName === null || userName === undefined || userName === "" || !userName) { if (0 <= result && result < 0.11) { userName = "friend"; } if (0.21 <= result && result < 0.31) { userName = "friend"; } if (0.41 <= result && result < 0.51) { userName = "friend"; } if (0.71 <= result && result < 0.81) { userName = "friend"; } if (0.81 <= result && result < 0.91) { userName = "friend"; } if (0.11 <= result && result < 0.21) { userName = "Friend"; } if (0.31 <= result && result < 0.41) { userName = "Friend"; } if (0.51 <= result && result < 0.61) { userName = "Friend"; } if (0.61 <= result && result < 0.71) { userName = "Friend"; } if (0.91 <= result && result < 1) { userName = "Friend"; } } //This code block changes the sentence with ID 'compliment' randomly, based on the value of the variable 'result'. if (0 <= result && result < 0.11) { document.getElementById("compliment").innerHTML = compliment1 + ", " + userName + "!"; }; if (0.11 <= result && result < 0.21) { document.getElementById("compliment").innerHTML = userName + ", " + compliment2 + "."; }; if (0.21 <= result && result < 0.31) { document.getElementById("compliment").innerHTML = compliment3 + ", " + userName + "."; }; if (0.31 <= result && result < 0.41) { document.getElementById("compliment").innerHTML = userName + ", " + compliment4 + "."; }; if (0.41 <= result && result < 0.51) { document.getElementById("compliment").innerHTML = compliment5 + ", " + userName + "!"; }; if (0.51 <= result && result < 0.61) { document.getElementById("compliment").innerHTML = userName + ", " + compliment6 + "."; }; if (0.61 <= result && result < 0.71) { document.getElementById("compliment").innerHTML = userName + ", " + compliment7 + "."; }; if (0.71 <= result && result < 0.81) { document.getElementById("compliment").innerHTML = compliment8 + ", " + userName + "."; }; if (0.81 <= result && result < 0.91) { document.getElementById("compliment").innerHTML = compliment9 + ", " + userName + "."; }; if (0.91 <= result && result < 1) { document.getElementById("compliment").innerHTML = userName + ", " + compliment10 + "."; }; } </script> </body> </html>

Answer 1

Well, it actually works, but after one "compliment" userName is no longer null or undefined, so your outer if-block won't trigger again. If you want to reassign userName each time, you could use a boolean to check if the current userName was actually chosen by the user or by your code.

The code could look like this:

 var userName = prompt("What is your name?"); //We still use your userName-check, but we store the result in a variable so we can access it everytime the user clicks the button var generatedUsername = userName === null || userName === undefined || userName === "" || !userName; var compliment1 = "Have a nice day"; var compliment2 = "you contribute to society"; var compliment3 = "Always be yourself"; var compliment4 = "you are a wonderful person"; var compliment5 = "Keep up the good work"; var compliment6 = "never stop believing in yourself"; var compliment7 = "you have a great sense of humor"; var compliment8 = "You should feel proud of yourself"; var compliment9 = "Never stop trying"; var compliment10 = "you are a winner"; function inspire() { var result = Math.random(); //This code block changes the username if it was chosen by code if (generatedUsername) { if (0 <= result && result < 0.11) { userName = "friend"; } if (0.21 <= result && result < 0.31) { userName = "friend"; } if (0.41 <= result && result < 0.51) { userName = "friend"; } if (0.71 <= result && result < 0.81) { userName = "friend"; } if (0.81 <= result && result < 0.91) { userName = "friend"; } if (0.11 <= result && result < 0.21) { userName = "Friend"; } if (0.31 <= result && result < 0.41) { userName = "Friend"; } if (0.51 <= result && result < 0.61) { userName = "Friend"; } if (0.61 <= result && result < 0.71) { userName = "Friend"; } if (0.91 <= result && result < 1) { userName = "Friend"; } } //This code block changes the sentence with ID 'compliment' randomly, based on the value of the variable 'result'. if (0 <= result && result < 0.11) { document.getElementById("compliment").innerHTML = compliment1+", "+userName+"!"; }; if (0.11 <= result && result < 0.21) { document.getElementById("compliment").innerHTML = userName+", "+compliment2+"."; }; if (0.21 <= result && result < 0.31) { document.getElementById("compliment").innerHTML = compliment3+", "+userName+"."; }; if (0.31 <= result && result < 0.41) { document.getElementById("compliment").innerHTML = userName+", "+compliment4+"."; }; if (0.41 <= result && result < 0.51) { document.getElementById("compliment").innerHTML = compliment5+", "+userName+"!"; }; if (0.51 <= result && result < 0.61) { document.getElementById("compliment").innerHTML = userName+", "+compliment6+"."; }; if (0.61 <= result && result < 0.71) { document.getElementById("compliment").innerHTML = userName+", "+compliment7+"."; }; if (0.71 <= result && result < 0.81) { document.getElementById("compliment").innerHTML = compliment8+", "+userName+"."; }; if (0.81 <= result && result < 0.91) { document.getElementById("compliment").innerHTML = compliment9+", "+userName+"."; }; if (0.91 <= result && result < 1) { document.getElementById("compliment").innerHTML = userName+", "+compliment10+"."; }; }

Nonetheless, you really should look into simplifying your code, as many segments are repeated over and over again.

Answer 2

You can use the javascript .toUpperCase() method to convert your characters to uppercase.

If you want to capitalize the whole word, use:

string.toUpperCase()

If you want to only capitalize the first letter of the word, use:

string.charAt(0).toUpperCase() + string.slice(1)

where string is the text you want to capitalize.

Answer 3

You can try using else if block.

EG:

if (0 <= result && result < 0.11) {
    document.getElementById("compliment").innerHTML = compliment1 + ", " + userName + "!";
} else if (0.11 <= result && result < 0.21) {
    document.getElementById("compliment").innerHTML = userName + ", " + compliment2 + ".";
} else if (0.21 <= result && result < 0.31) {
    document.getElementById("compliment").innerHTML = compliment3 + ", " + userName + ".";
};

and so on.

Answer 4

Capitalize your name before giving the compliment ie

function capitalizeFirstLetter(name) {
    return name.charAt(0).toUpperCase() + name.slice(1);
}

add

userName = capitalizeFirstLetter(userName);

before your if conditions where you change the innerHTMLs

Answer 5

Try like this.Change name into lowercase first.Then pick up the first character to change into uppercase and replace the first character and get the name with first character as uppercase.

var userName = prompt("What is your name?");

var lower = username.toLowerCase();//changes to all characters at lower (because if input is aBcX then it changes to abcx)

var first = username.slice(0,1); //now outputs first character(a in abcx)
var finalname = username.replace(first,first.toUpperCase(first));//outputs Abcx

If statements aren't functioning correctly

Question

5 answers

solution1
1 ACCPTED 2017-01-16 06:15:09

solution2
0 2017-01-16 06:09:54

solution3
0 2017-01-16 06:10:42

solution4
0 2017-01-16 06:14:45

solution5
0 2017-01-16 06:19:30

If statements aren't functioning correctly

Question

5 answers

solution1 1 ACCPTED 2017-01-16 06:15:09

solution2 0 2017-01-16 06:09:54

solution3 0 2017-01-16 06:10:42

solution4 0 2017-01-16 06:14:45

solution5 0 2017-01-16 06:19:30

solution1
1 ACCPTED 2017-01-16 06:15:09

solution2
0 2017-01-16 06:09:54

solution3
0 2017-01-16 06:10:42

solution4
0 2017-01-16 06:14:45

solution5
0 2017-01-16 06:19:30