onClick text change

Question

so I'm pretty new with html and need some help.

I'm trying to make 3 buttons and each of them will change the text next to when you click on them. I am using the following code for each button:

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

When I click on the button the text will change in the text after the innerHTML=" ". The problem is that one I add to much text on the places ---future--- it won't load it anymore in the browser. The screen just won't update. How do I overcome this problem? I've been having this problem for quite some time so any help will be appriciated.

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>

Try This Code. It Works For Me. In The Above Code I Have Used [bold] tag To Focus It You Can Use Acronym Tag.

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>

Use the same function on all buttons to change the text!

Check this fiddle.

Answer 3

Try this to change text on click the text:

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

Here is the demo

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