时间戳

首页 > 解决方案 > 如何在点击时替换 HTML 元素？

javascript - 如何在点击时替换 HTML 元素？

问题描述

我正在为讲故事类型的游戏开发此代码，并且在用户或玩家完成选择他们的选项后，我需要更改保管箱选项。我正在尝试使保管箱中的选项与给定时刻游戏中发生的事情相关。每次用户选择他们的选项时，我都被告知要研究元素的可能变化（在 Dropbox 中有不同的选项）。

我尝试了一些 jquery，但只在点击时移动了 Dropbox。我找不到任何类型的运算符可以帮助我更改它。我的代码中的附加位正在提交输入并获得结果

<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>

标签： javascripthtmlcss

解决方案

你可以很容易地做到这一点.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 内容。反引号运算符 (`) 形成一个模板字符串，它能够跨越多行，从而更容易布置新选项。如果您愿意，您可以在此处使用常规字符串（当然可以使用循环、数组等生成此值）。

推荐阅读