点击文本改变

Question

我很新手，需要一些关于html的帮助。

我正在尝试制作3个按钮，每个按钮点击后都会更改旁边的文本。我为每个按钮使用以下代码：

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

当我点击按钮时，文本将在innerHTML=" "之后的文本中更改。问题是，如果我在未来的位置添加太多文本，它将无法再在浏览器中加载。屏幕就不会更新。我该如何解决这个问题？我已经遇到这个问题有一段时间了，所以任何帮助都会受到赞赏。

- Jurjen van Genugten

---

首先，这是 JavaScript，不是 HTML。 - Antony

你在控制台看到了什么错误？ - pbibergal

它适用于长文本：http://jsfiddle.net/a5WXw/ - Antony

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>

试用这段代码。它对我起作用了。 在上述代码中，我使用了 [bold] 标记来强调它，你可以使用缩写标记。

- Divyam Solanki

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>

使用相同的函数在所有按钮上更改文本！

查看此示例。

- Mohammad Areeb Siddiqui

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>

- M. Lak

Answer 4

Use this code:

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

- Bal mukund kumar