如何在单击时替换 HTML 元素？

Question

我正在为讲故事类型的游戏开发此代码，我需要在用户或玩家完成选择后更改保管箱选项。我正在尝试使 Dropbox 中的选项与给定时刻游戏中发生的事情相关。每次用户选择他们的选项时，我被告知要对元素的可能变化（在保管箱中使用不同的选项）进行研究。我尝试了一些 jquery，但只在点击时移动了保管箱。我找不到任何类型的运算符可以帮助我更改它。我的代码中的附加位正在提交输入并获得结果<div id="actions">    <select id="chosen_action">        <option value="You have entered the dungeon...">Yes</option>        <option value="You turned and left THE END">No</option>        <option value="You attempted to communicate with the enemy...">Talk</option>    </select>    <button onclick="append_to_history()">Go!</button></div>

Answer 1

你可以很容易地做到这一点.innerHTML：

$("#chosen_action").innerHTML = `

    <option>You turn away from the castle</option>

    <option>You take a closer look at the old drawbridge</option>

    <option>You decide to consult your map</option>

`;

.innerHTML简单地更改给定元素的 HTML 内容。反引号运算符 (`) 形成一个模板字符串，它能够跨越多行，从而更容易布置新选项。如果您愿意，您可以在此处使用常规字符串（当然也可以使用循环、数组等生成此值）。

Answer 2

const choice = document.getElementById('chosen_action');

const opt1 = document.getElementById('option1');

const opt2 = document.getElementById('option2');

const opt3 = document.getElementById('option3');

const go = document.getElementById('goButton');

go.addEventListener('click',(e) => {

  if(choice.value !== ""){

    if(choice.value === opt1.value){

      opt1.value = ... //change the value of this element

      opt2.value = ...

      opt3.value = ...

      //if need to change value of text shown to user for selection you can:

      opt1.textContent = ...//change the text of this element

      opt2.textContent = ...

      opt3.textContent = ...

    } else if(choice.value === opt2.value){

      ...

      ...

      ...

    } else{

      ...

      ...

      ...

    }

  } else {

    alert("You must make a choice to continue!")

  }

})

<div id="actions">

  <select id="chosen_action">

    <option id="option1" value="You have entered the dungeon...">Yes</option>

    <option id="option2" value="You turned and left THE END">No</option>

    <option id="option3" value="You attempted to communicate with the enemy...">Talk</option>

  </select>

  <button id="goButton" onclick="append_to_history()">Go!</button>

</div>

我无法发表评论以收集更多信息，因此，如果不了解更多关于您要问什么，或者您的游戏在哪里，或者“append_to_history()”的作用，或者有多少可能的组合等，这是做你需要做的事情的一种方式。

最后，我猜您将不得不制作一个巨大的对象，或大量较小的对象，并提出一个命名系统，您可以在需要时以编程方式从中获取正确的值。可能是一个跟踪器来计算选择的数量（每个按钮单击），然后相应地命名您的对象，以便您可以使用跟踪器值和选项编号来调用正确的值。在某个时候，您必须弄清楚每个可能的值，然后根据单击时选择的值以编程方式为每个新值调用它们。

不过，有兴趣知道其他人是否对此有任何不同的看法！