javascript - 当 JS 变量等于 x 时，尝试在 HTML div 选项卡中显示某些 "storyline"

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";
  }
}

所以当你点击家、村庄或研究时，clearing div 中的文本应该改变。