-1
ランダムに生成された番号を取り、その番号に基づいて段落のテキストを適宜変更する簡単なWebサイトを作成しています。私は解決されたnull値をテストしていました。しかし、テキストは、文頭または文末に移動するかどうかに基づいて大文字または小文字に変換されます。私はこれを解決していないようです。私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