当 JS 变量等于 x 时，尝试在 HTML div 选项卡中显示某些“故事情节”

Question

我最近问了几个问题，因为我正在尝试制作基于 HTML5/CSS/JavaScript 的增量游戏，我遇到了一个障碍，想知道如果可能的话，是否有人可以提供一些帮助。主游戏显示将是屏幕顶部的一系列选项卡，当单击每个选项卡时，屏幕上将显示与游戏内容的每个单独部分相关的不同信息：即标签 1 | 主页 // 标签 2 | 村庄 // Tab 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 中的文本应该会改变。