Onclick text change

Question

so i'm pretty new to html and need some help.

I am trying to make 3 buttons, and each of them will change the text next to when you click on them. I use 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 innerHTML = "". The problem is that I am adding a lot of text locally --- the future --- it will no longer load it in the browser. The screen just won’t refresh. How do I solve this problem? I had this problem for quite some time, so any help would be assigned.

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 used the [bold] tag. To Focus It. You can use the shortened 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 the fiddle .

Answer 3

Try changing the text by clicking on 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 a 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'; }