单击后显示多个按钮的文本

Question

I have three buttons that, once clicked, are supposed to show some text. I tried doing that in javascript but it only showed me the text for the first button underneath it no matter which button I clicked. Here is the code I have for javascript and html:

 function toggleText() { var text = document.getElementById("demo"); if (text.style.display === "none") { text.style.display = "block"; } else { text.style.display = "none"; } }

 <div class="row"> <div class="col-md-3 col-sm-3 col-xs-6"> <a href="javascript:void();" onclick="toggleText()" class="btn btn-sm animated-button thar-two">Button 1</a> <p id="demo" style="display: none">TEXT TEXT TEXT</p> </div> <div class="col-md-3 col-sm-3 col-xs-6"> <a href="javascript:void();" onclick="toggleText()" class="btn btn-sm animated-button thar-two">Button 2</a> <p id="demo" style="display: none">TEXT 2 TEXT 2 TEXT 2</p> </div> <div class="col-md-3 col-sm-3 col-xs-6"> <a href="javascript:void();" onclick="toggleText()" class="btn btn-sm animated-button thar-two">Button 3</a> <p id="demo" style="display: none">TEXT 3 TEXT 3 TEXT 3</p> </div> </div>

I'm still learning javascript so I need help changing the code. Thanks a lot in advance!

Answer 1

First of all the the attribute id should be unique in a document, you can use class attribute instead.

You can pass this object to the function so that you can refer the respective elements on clicking.

Demo:

 function toggleText(el) { var text = el.closest('div').querySelector(".demo"); if (text.style.display === "none") { text.style.display = "block"; } else { text.style.display = "none"; } }

 <div class="row"> <div class="col-md-3 col-sm-3 col-xs-6"> <a href="javascript:void();" onclick="toggleText(this)" class="btn btn-sm animated-button thar-two">Button 1</a> <p class="demo" style="display: none">TEXT TEXT TEXT</p> </div> <div class="col-md-3 col-sm-3 col-xs-6"> <a href="javascript:void();" onclick="toggleText(this)" class="btn btn-sm animated-button thar-two">Button 2</a> <p class="demo" style="display: none">TEXT 2 TEXT 2 TEXT 2</p> </div> <div class="col-md-3 col-sm-3 col-xs-6"> <a href="javascript:void();" onclick="toggleText(this)" class="btn btn-sm animated-button thar-two">Button 3</a> <p class="demo" style="display: none">TEXT 3 TEXT 3 TEXT 3</p> </div> </div>

Though, I suggest you to avoid inline event handler, you can use EventTarget.addEventListener() to attach events:

 function toggleText() { var text = this.closest('div').querySelector(".demo"); if (text.style.display === "none") { text.style.display = "block"; } else { text.style.display = "none"; } } var btnLinks = document.querySelectorAll('a.animated-button.thar-two'); btnLinks.forEach(function(btn){ btn.addEventListener('click', toggleText); });

 <div class="row"> <div class="col-md-3 col-sm-3 col-xs-6"> <a href="javascript:void();" class="btn btn-sm animated-button thar-two">Button 1</a> <p class="demo" style="display: none">TEXT TEXT TEXT</p> </div> <div class="col-md-3 col-sm-3 col-xs-6"> <a href="javascript:void();" class="btn btn-sm animated-button thar-two">Button 2</a> <p class="demo" style="display: none">TEXT 2 TEXT 2 TEXT 2</p> </div> <div class="col-md-3 col-sm-3 col-xs-6"> <a href="javascript:void();" class="btn btn-sm animated-button thar-two">Button 3</a> <p class="demo" style="display: none">TEXT 3 TEXT 3 TEXT 3</p> </div> </div>

Answer 2

This an alternative example from other answers, there are so many ways Js can get about doing things.

1. There can be only one ID per item and cannot be assigned to something else on parallel. So id="demo" needs updating.
2. There are many ways to go about this in JS you don;t necessarily need ID on paragraphs, depending upon the which design pattern you adopt.

Notes are in the code example as to what we are doing.

 //first we get whole list of buttoms present in page var buttonList = document.querySelectorAll('a'); //then we add event listner of all of the buttons no need for inlineJs for (i = 0; i < buttonList.length; i++) { buttonList[i].addEventListener("click", function(event){ //first after click we cancel any default event of achor tag event.preventDefault() //detect which button was clicked var buttonclicked = event.target; //get its immediate next parapragh elemetn var texts = buttonclicked.nextElementSibling; //get paragraphs actuall display property var displaylevel = texts.style.display; //run your if else here if(displaylevel =='none'){ texts.style.display = 'block'; } else {texts.style.display = 'none';} }); }

 <div class="row"> <div class="col-md-3 col-sm-3 col-xs-6"> <a href="#" class="btn btn-sm animated-button thar-two">Button 1</a> <p style="display: none">TEXT TEXT TEXT</p> </div> <div class="col-md-3 col-sm-3 col-xs-6"> <a href="#" class="btn btn-sm animated-button thar-two">Button 2</a> <p style="display: none">TEXT 2 TEXT 2 TEXT 2</p> </div> <div class="col-md-3 col-sm-3 col-xs-6"> <a href="#" class="btn btn-sm animated-button thar-two">Button 3</a> <p style="display: none">TEXT 3 TEXT 3 TEXT 3</p> </div> </div>