按下按钮后更改按钮和文本

时间:2015-11-03 04:52:24

标签: html

我正在尝试制作一个基于文本(使用ASCII艺术)的RPG游戏,而我在打开序列时遇到了麻烦。这是我开场的剧本:

<body>
<pre>
Welcome To __________! <!-- No name yet :P -->


<button onclick="menuButtonPressed1()" type="button">Cool, is this the whole game?</button>

<p id="demo"></p>

<script>
function menuButtonPressed1() {
    document.getElementById("demo").innerHTML = "No, there's more!";
}
</script>


</pre>
</body>

此代码适用于使按钮显示文本和所有内容,但我想要做的是使按钮清除屏幕上的当前文本并将按钮更改为其他文本。例如,我想要的是它说了些什么,但是当我按下按钮时它会改变文本,按钮的文本也会改变。所以如果你看到:(忽略颜色)

Welcome to ____!

(There will be button here with text "Cool, is this the whole game?")

然后你按下它你将清除屏幕上的所有当前文字并获得:(再次,忽略颜色)

Hello to you!

(There is another button here with different text)

如果我可以添加一些东西以便于理解或更容易回答等,请告诉我,以便我可以纠正它。我对html的态度不是很好,所以如果我的代码中出现了一些完全错误的东西,我相信你能理解。

1 个答案:

答案 0 :(得分:1)

你应该将文字包装在某些标签中,例如&lt; p&gt;或者&lt; span&gt;。然后给它一个ID并在onClick按钮上使用该ID来更改该文本以及按钮文本。 它只使用具有不同ID的相同代码。