-1
我正在創建一個簡單的網站，它需要一個隨機生成的數字並基於該數字，它會相應地更改段落的文本。我正在測試已解決的空值。然而，文本應該是大寫或不是基於它是否在句子的開頭或結尾。我似乎無法解決這個問題。我的jsfiddle鏈接低於：如果語句不能正常工作
https://jsfiddle.net/MCBlastoise/n2vh40ah/
而且下面是我的代碼片段：
.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>
不完全是一種恭維，但請熟悉[陣列（https://developer.mozilla.org/en-US/docs/Learn/JavaScript/First_steps/Arrays）。如何解決這個問題，以小寫形式硬編碼所有內容，並使用CSS開始用大寫字母開頭的句子。 – Teemu
是的，我剛剛想到了一點點 – MCBlastoise