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
– Syn, Commented Apr 24, 2018 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
– adprocas, Commented Apr 24, 2018 at 10:53
Please, do more research then post what you've tried with a clear explanation of what isn't working and provide a Minimal, Complete, and Verifiable example. Read How to Ask a good question. Be sure to take the tour and read this. — adprocas
– adprocas, Commented Apr 24, 2018 at 10:53

Ask Xah · Accepted Answer · 2018-04-24 10:46:52Z

6

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>

answered Apr 24, 2018 at 10:46

Ask Xah

2372 silver badges13 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

adprocas · Accepted Answer · 2018-04-24 11:07:59Z

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;

Collectives™ on Stack Overflow

Changing text using a button click in HTML

2 Answers 2

Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related