當 JS 變量等於 x 時，嘗試在 HTML div 選項卡中顯示某些“故事情節”

Question

大家好，感謝您花時間看我的問題。

我最近問了幾個問題，因為我正在嘗試制作一個基於 HTML5/CSS/JavaScript 的增量游戲，但我遇到了一個障礙，想​​知道是否有人可以提供一些幫助。

主要游戲顯示將是屏幕頂部的一系列選項卡，單擊每個選項卡時，屏幕上將顯示與游戲內容的每個單獨部分相關的不同信息：

即標簽 1 | 主頁 // 標簽 2 | 村庄 // 選項卡 3 | 研究等

現在，當點擊這些標簽中的每一個時，它們將是“h3”標簽中的標簽標題，然后在“h3”標簽標題“h3”下方，我想根據位於javascript 文件唯一的問題是我不知道如何讓 html 文件檢查 javascript 文件中的某個變量，以便告訴 html 文件在單擊該選項卡時顯示故事情節的哪一部分。

所以總而言之，當 javasctipt 變量等效於 X 時，我正在尋找一種在每個“html 選項卡”中顯示故事內容的方法

我想......除非有更簡單的方法來做到這一點（答案可能也很簡單，只是沒有在我的大腦中點擊我需要做的......）

以下當前代碼示例：

<div id="clearing" class="tabcontent">
                    <h3>The Clearing</h3>
                    {if JS Variable === 1
                        <p>You wake up to find yourself in a strange clearing unaware of what has happened to you.
                        You scramble around with blurred vision feeling a crunch under your bare feet as you stumble around...
                        "Ugh... Where am I..., What on earth happened to me?"</p>

                        <p>You continue scrambling around and you hear faint noises in the distance...</p>
                    }

                    {if JS Variable === 2
                        <p>You make it back to the clearing after being greeted by the local population and you try 
                           to work out what your next step will be, For now though you going to need some shelter 
                           because it look's like it's going to rain quite heavily and you don't want to be caught 
                           outside in that.</p>
                    }
                </div>

非常感謝您提供的任何幫助。

Answer 1

我強烈建議將 JavaScript 和 HTML 分開。 否則你最終會陷入困境。

你基本上要找的是這樣的：

HTML：

<div id="home">Home</div>
<div id="village">Village</div>
<div id="research">Research</div>

<div id="clearing" class="tabcontent">
  <h3>The Clearing</h3>
  <p id="text"</p>
</div>

javascript文件：

document.getElementById("home").onclick = function () {
  document.getElementById("text").innerHTML = "your home text";
}

document.getElementById("village").onclick = function () {
  document.getElementById("text").innerHTML = "your village text";
}


document.getElementById("research").onclick = function () {
  if(variable === 3) {
    document.getElementById("text").innerHTML = "your research text";
  }
  else {
    document.getElementById("text").innerHTML = "other research text";
  }
}

因此，當您單擊“家”、“村庄”或“研究”時，清除 div 中的文本應該會發生變化。