Changing text using a button click in HTML

Question

I have a list of about 8 or so buttons that that list different categories of shops (Menswear, Food, Sports etc) and I want to display a list of shops for each category when I click on them, but using the same area of the page. So it would replace the 'sports shops' with 'Food shops' when I click on the "Food Shops" button.

How would I do this fairly simply? (I'm a noob, try to keep it simple if you can)

You want to use the `javascript` tag, not the `java` one. It will make your question easier to find. — Syn, Apr 24 '18 at 10:43
Welcome to stack overflow. I am going to follow this up with a comment that contains some links and information for you to read. In short, this is a very common question and doesn't need to be asked again. You'll learn that you need to do some research before posting questions on here. — adprocas, Apr 24 '18 at 10:53
[Please, do more research](https://meta.stackoverflow.com/questions/261592/how-much-research-effort-is-expected-of-stack-overflow-users) then **post what you've tried** with a **clear explanation of what isn't** working and provide a [Minimal, Complete, and Verifiable example](https://stackoverflow.com/help/mcve). Read [How to Ask a good question](https://stackoverflow.com/help/how-to-ask). Be sure to [take the tour](https://stackoverflow.com/tour) and read [this](https://meta.stackoverflow.com/questions/347937/im-new-to-stack-overflow-what-are-some-things-i-should-do-and-what-things-wil). — adprocas, Apr 24 '18 at 10:53
Possible duplicate of [HTML/Javascript change div content](https://stackoverflow.com/questions/2554149/html-javascript-change-div-content) — adprocas, Apr 24 '18 at 10:57
And this one [How do I replace text inside a div element?](https://stackoverflow.com/questions/121817/how-do-i-replace-text-inside-a-div-element) — adprocas, Apr 24 '18 at 11:00
This will get you to your answer as well [Changing div content with Javascript onClick](https://stackoverflow.com/questions/29976206/changing-div-content-with-javascript-onclick) — adprocas, Apr 24 '18 at 11:01

score 6 · Answer 1 · answered Apr 24 '18 at 10:46

You can try this simple javascript to change the text onclick

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

score 0 · Answer 2 · answered Apr 24 '18 at 11:07

The above answer gets the job done, but here's an example of how to do this in a somewhat reusable way, so you don't have that repeated document.getElementById('chgtext').innerHTML= code.

This also shows you that the onclick attribute will allow you to run or call JavaScript code.

function changeText(text) {

  document.getElementById('chgtext').innerHTML = text;

}

<div id="chgtext">This is my current text</div>

<a href="#" onclick="changeText('Change the text using javascript')">Change text</a> &nbsp; &nbsp;
<a href="#" onclick="changeText('Text will be changed based on the other text')">Change text2</a>&nbsp;  &nbsp;
<a href="#" onclick="changeText('This is another sample changed text on click the onther text')">Change text3</a>&nbsp;  &nbsp;

Changing text using a button click in HTML

2 Answers2