一種更簡單的處理方法是將故事的每個段落存儲在一個數組中，然后使用您的計數器從數組項中提取故事的一部分，其索引與您的計數器相匹配。然后，您無需進行任何if/else測試。
筆記：
該style標簽所屬的head文件，而不是部分body。
標題標簽（h1、h2、h3等）只能用于在文檔中創建部分。因此，您不能有第 3 節 ( h3)，除非您已經有第 1 節和第 2 節 ( h1, h2)。
不要用 覆蓋顯示區域的內容 .innerHTML，只需設置一個元素來保存文本并僅用 更新文本.textContent。
始終縮進您的代碼，這將使其更具可讀性并更容易發現錯誤。最后，HTML、CSS 和 JavaScript 在標準開始發揮作用之前有很長的生命周期，因此您今天看到的很多（我的意思是很多）代碼是由沒有花時間學習如何使用的人創建的以現代標準和方法論來編寫這些語言。許多人只是復制/粘貼其他人似乎有效的代碼，而沒有意識到他們使用的代碼不是正確的方法。事實上，許多大學教授并不精通這些主題，也教授不好的做法。到目前為止，您做得很好，但請查看我個人資料中的鏈接對于我寫過的幾個主題，這將使您走上良好的學習道路。（PS - 自從它被發明以來，我一直在編碼和教授所有這些東西。）
保持良好的工作！
<html>
<head>
<title>The Devil's Number</title>
<style>
@import url('https://fonts.googleapis.com/css?family=Mansalva&display=swap');
*{
font-family: 'Mansalva', cursive;
margin:0;
}
body, html{
width:100%;
height:100%;
}
#bodyDiv{
width:100%;
height:100%;
position:absolute;
text-align:center;
}
h2{
position:absolute;
transform:translate(-50%,-50%);
top:50%;
left:50%;
color:#ffffff;
}
h1{
color:#ff0000;
font-size:50px;
text-shadow: rgb(0, 0, 0) 3px 0px 0px,
rgb(0, 0, 0) 2.83487px 0.981584px 0px,
rgb(0, 0, 0) 2.35766px 1.85511px 0px,
rgb(0, 0, 0) 1.62091px 2.52441px 0px,
rgb(0, 0, 0) 0.705713px 2.91581px 0px,
rgb(0, 0, 0) -0.287171px 2.98622px 0px,
rgb(0, 0, 0) -1.24844px 2.72789px 0px,
rgb(0, 0, 0) -2.07227px 2.16926px 0px,
rgb(0, 0, 0) -2.66798px 1.37182px 0px,
rgb(0, 0, 0) -2.96998px 0.42336px 0px,
rgb(0, 0, 0) -2.94502px -0.571704px 0px,
rgb(0, 0, 0) -2.59586px -1.50383px 0px,
rgb(0, 0, 0) -1.96093px -2.27041px 0px,
rgb(0, 0, 0) -1.11013px -2.78704px 0px,
rgb(0, 0, 0) -0.137119px -2.99686px 0px,
rgb(0, 0, 0) 0.850987px -2.87677px 0px,
rgb(0, 0, 0) 1.74541px -2.43999px 0px,
rgb(0, 0, 0) 2.44769px -1.73459px 0px,
rgb(0, 0, 0) 2.88051px -0.838247px 0px;
}
body{
background:url('https://media1.giphy.com/media/IPFz7kGsj5tqU/giphy.gif' no-repeat center center;
background-size:100%;
}
#play{
font-size:20;
background-color:#ff0000;
border:none;
border-color:#6b0000;
padding-left:15px;
padding-right:15px;
padding-top:10px;
padding-bottom:10px;
border-radius:10px;
outline:none;
transition-duration:0s;
}
button:hover{
background:url('https://media2.giphy.com/media/3o6vXRxrhj7Ov94Gbu/giphy.gif')no-repeat center center;
background-size:100%;
color:white;
border:none;
}
#center{
text-align:center;
padding:10px;
position:absolute;
transform:translate(-50%,-50%);
border-radius:10px;
top:50%;
left:50%;
}
.hidden { display:none; } /* This will be removed to show the element when the time comes */
</style>
</head>
<body>
<div id="bodyDiv">
<div id="center">
<h1 align="center">The Devil's Number</h1>
<button id="play" onclick="play()">Play</button>
</div>
<!-- Don't use headings because of how they style the text. You can't have an h3 without
first having an h1 and h2. This is where each passage of the story will go. Because
each passage will go inside of this element, you won't need to write a new H3 with
.innerHTML each time. You can just update the contents of the one tag over and over
with .textContent -->
<h2 id="sentence" class="hidden"></h2>
</div>
<script>
var counter = 0;
var bd = document.getElementById('bodyDiv');
var sentence = document.getElementById("sentence");
sentence.addEventListener("click", next);
function play(){
clicks = 0;
document.body.style.background = "url('https://media.giphy.com/media/ptbUFNalAnoQw/giphy.gif')no-repeat center center";
document.body.style.backgroundSize = "100%";
document.getElementById('center').remove();
sentence.classList.remove("hidden"); // Remove the CSS that hides the sentence placeholder
next();
}
// Put each sentence in the array.
var sentences = ["You wake up in the dead of night, not able to see anything.",
"You can sense someone in your home.",
"sentence 3",
"sentence 4",
"sentence 5",
"sentence 6",
"sentence 7",
"sentence 8"
];
function next(){
// Display the array item with the index that matches the counter
sentence.textContent = sentences[counter];
counter++ // Increase counter by 1
if(counter === sentences.length){
counter = 0; // counter has reached end of the array. reset it.
sentence.textContent = "The End";
}
}
</script>
</body>
</html>
