Cannot figure out what is wrong in my code (getElementsByClassName, Javascript button)

Question

Im kinda new here in the developer community and cannot find the answer to my question unfortunately, even though I was looking for it for hours.

So the main issue is, that I want to have a "Show more" button in a text, which was working fine with getElementById by it's not working with ClassName.

Could you please help me?

Here is the code:

<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, <span class="dots">...</span><span class="more"> quis nostrud exercitation ullamco laboris nisi ut aliquip.</p></span>
<button onclick="myFunction()" class="myBtn">Show more</button>

JS:

function myFunction() {
var dots = document.getElementsByClassName("dots");
var moreText = document.getElementsByClassName("more");
var btnText = document.getElementsByClassName("myBtn");

if (dots.style.display === "none") {
  dots.style.display = "inline";
  btnText.innerHTML = "Show more";
  moreText.style.display = "none";
}
else {
  dots.style.display = "none";
  btnText.innerHTML = "Show less";
  moreText.style.display = "inline";
}

}

Thanks in advance for your feedback.

See `getElementsByClassName()` documentation, it returns an array-like object. You have to use specific index. — Mamun, Jul 18 '20 at 11:21
Just access the first element like this: `if (dots[0].style...` or use `document.querySelector(".dots").style...` — Đinh Carabus, Jul 18 '20 at 11:22
@subarachnid thanks, it's working with document.querySelector(".dots").style.. is it possible to use the same button multiple times on different divs? — Lajos Duzmath, Jul 18 '20 at 11:27
@LajosDuzmath I can't answer here anymore but have a look at this: https://jsfiddle.net/wmcz9yvt/ — Đinh Carabus, Jul 18 '20 at 11:45
Thank you so much! That is what I was looking for! God bless you man! — Lajos Duzmath, Jul 18 '20 at 17:14

Cannot figure out what is wrong in my code (getElementsByClassName, Javascript button)

0 Answers0