on onClick更改javascript中的文本

Question

我想制作如下格式：

短语
[按钮]

单击该按钮时，“短语”会发生变化，按钮仍然存在。我能够这样做，所以文字出现，但我不能这样按钮保持。有没有人知道如何做到这一点？感谢。

Answer 1

最终剧本

Javascript（替换）

function displayPhrase()
{
    document.getElementById("demo").innerHTML = 'New Phrase';
}

HTML（旧短语）

<span id="demo">Old Phrase</span>

HTML（按钮）

<button type="button" onclick="displayPhrase()"></button>

归功于以上答案^ _ ^

Answer 2

看看this。

Answer 3

  

我能够这样做，所以文字出现，但是我不能这样按钮停留。

我的猜测是您要更新同时包含button元素的元素，此更新正在清除button。

HTML

<span id="phrase"></span>
<button id="change-phrase" type="button">Change Phrase</button>

的JavaScript

var button = document.getElementById('change-phrase'),
    content = document.getElementById('phrase');

button.onclick = function() {
    content.innerHTML = 'Your new phrase';
};

jsFiddle

Answer 4

使用此代码：

<强> HTML：

<h1> Welcome to the </h2><span id="future-clicked"></span>

<button onclick="clicked_on()">Click for future</button>

<强> JS：

<script>
    function clicked_on(){
        document.getElementById('future-clicked').innerHTML = 'Future World';
    }
</script>