CODEWITHSUNDEEP
javascripthtml
Al-Meqdad Jabi
Al-Meqdad Jabi

Reputation: 55

JavaScript pressing a button to show text not working with multiple buttons

I got this code for JavaScript and I have an error; when I use more than one read more button, it shows the first text only. If I used 3 buttons and I press on any of these 3, only the first one would show the first one in HTML and the bottom ones are not even there.

The only solution I tried is to change the variable names and the function names for this to work and used same function again and again but I want one function for all the read more buttons.

I'm not allowed to use jQuery for this college project so if you could help me in JavaScript thank you.

The button code:

<span id="dots1">...</span>
<span style="display: none;" id="more1">The text I want to be on read more</span>
</p></p>
<button onclick="Show1()" class="btn" id="myBtn1">Read more</button>

and this is the JavaScript code:

function Show() {
  var dots = document.getElementById("dots");
  var moreText = document.getElementById("more");
  var btnText = document.getElementById("myBtn");
  
  if (dots.style.display === "none") {
    dots.style.display = "inline";
    btnText.innerHTML = "Read more";
    moreText.style.display = "none";
  } else {
    dots.style.display = "none";
    btnText.innerHTML = "Read less";
    moreText.style.display = "inline";
  }
}

Upvotes: 0

Views: 522

Answers (3)

costaparas
costaparas

Reputation: 5237

It seems what you need is to re-use the same function for any amount of buttons on your page, to show and hide the text.

To do this, you would first group up each set of button and span elements, e.g. putting a div around them. This step is important, since it allows us to easily refer to other elements in the same group.

Then, you can add an event listener on all the buttons, listening on the click event (this is very similar to the onclick attribute you currently use - but is very much preferred). The handler for this can more or less be your existing function -- slightly adapted though. Instead of selecting the span elements by their id, you can use querySelectorAll on the parentElement of the button -- this being the div we added earlier. This would find two such spans -- dots and moreText. The rest of the function would remain the same.

Here is a working snippet that demonstrates this for two buttons. The JS would still work if you add further buttons as needed.

for (const btn of document.querySelectorAll('.btn')) {
  btn.addEventListener('click', () => {
    const [ dots, moreText ] = Array.from(btn.parentElement.querySelectorAll('span'));
    if (dots.style.display === "none") {
      dots.style.display = "inline";
      btn.innerHTML = "Read more";
      moreText.style.display = "none";
    } else {
      dots.style.display = "none";
      btn.innerHTML = "Read less";
      moreText.style.display = "inline";
    }
  });
}
<div>
  <span id="dots1">...</span>
  <span style="display: none;" id="more1">The text I want to be on read more</span>
  <p></p>
  <button class="btn" id="myBtn1">Read more</button>
</div>

<div>
  <span id="dots2">...</span>
  <span style="display: none;" id="more2">The text I want to be on read more</span>
  <p></p>
  <button class="btn" id="myBtn2">Read more</button>
</div>

Upvotes: 1

Imran Rafiq Rather
Imran Rafiq Rather

Reputation: 8098

You want to kind of toggle the btn text, also show and hide content on btn cliks. I have created it for you :)

Have made basic changes in HTML file. Do pay attention :)

  
const btn = document.querySelector(".btn");
const span2 = document.querySelector(".more2");
btn.addEventListener("click",(e)=>{
  
  if(span2.style.display === "none"){
    span2.style.display = "inline-block";
    btn.textContent = "Read Less";
  }else if(span2.style.display === "inline-block"){
     span2.style.display = "none";
    btn.textContent = "Read More";
  }
});
div{
  margin-bottom:1rem;
}
<html>
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width">
  <title>JS Bin</title>
</head>
<body>
  <div>
<span id="dots1">...</span>
<span class="more2" style="display: none;">The text I want to be on read more</span>
  </div>
<button class="btn">Read more</button>
</body>
</html>

Upvotes: 0

Bart
Bart

Reputation: 11

If I understand your problem correctly, I think the problem is that you use getElementById and you keep calling the same part of the html with every button.

to solve this you could give every Read More part in your html a different id and call this in your javascript accordingly.

Upvotes: 0

Related Questions