onClick文本更改

Question

所以我對html很新，需要一些幫助。

我正在嘗試制作3個按鈕，每個按鈕都會在您點擊它們時更改旁邊的文本。 我為每個按鈕使用以下代碼：

<a href="#" onClick="document.getElementById('past').innerHTML='---future---';">

當我點擊按鈕時，文本將在innerHTML =“”之后的文本中更改。 問題是我在地方添加了很多文字---未來---它不再在瀏覽器中加載它。 屏幕不會更新。 我該如何克服這個問題？ 我已經有這個問題已經有一段時間了，所以任何幫助都會得到滿足。

Answer 1

<script>
function changeText()
{
 document.getElementById('boldStuff').innerHTML = 'Fred Flinstone';
}
</script>
<p>Welcome to the site <b id='boldStuff'>dude</b> </p> 
<input type='button' onclick='changeText()' value='Change Text'/>
</body>
</html>

試試此代碼。 這個對我有用。 在上面的代碼中我使用[粗體]標記來集中它你可以使用縮寫標簽。

Answer 2

<p id="peep"></p>

<button onclick="myFunction('Harry Potter')">Click for Harry Potter</button>
<button onclick="myFunction('Bob')">Click for Bob</button>

<script>
function myFunction(name)
{
document.getElementById("peep").innerHTML = "Welcome " + name;
}
</script>

在所有按鈕上使用相同的功能來更改文本！

檢查這個小提琴 。

Answer 3

單擊文本，嘗試此更改文本：

 <div id="chgtext">This is my current text</div>
    <a href="#" onclick="document.getElementById('chgtext').innerHTML='Change the text using javascript';">Change text</a> &nbsp; &nbsp;
    <a href="#" onclick="document.getElementById('chgtext').innerHTML='Text will be changed based on the other text';">Change text2</a>&nbsp;  &nbsp;
    <a href="#" onclick="document.getElementById('chgtext').innerHTML='This is another sample changed text on click the onther text';">Change text3</a>&nbsp;  &nbsp;
    </div>

這是演示

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';
    }