Clicking anywhere on the body of the site triggers a javascript function?

JavaScript
1

Hello, I am using this JS so that when a button is clicked, it shows more text. However, whenever I click on the body it turns it into show less.

This is occurring in PHPStorm local host and on my test site.

let readMoreBtns = document.querySelectorAll(".read_more_btn");
readMoreBtns.forEach(function(){
	this.addEventListener( 'click' , changeClass);
})

function changeClass(event) {
	let btn = event.target,
		context = event.target.parentNode,
		toggleEl = context.querySelector(".extra_content");

	toggleEl.classList.toggle('show');

	if (toggleEl.classList.contains("show")) {
		btn.innerHTML = "Show Less";
	} else {
		btn.innerHTML = "Show More";
	}

}

That is the thread where I was helped to use this code. How can I fix this?

Probably a stupid question, but I don’t have much experience with JS. Thanks in advance!

Thanks

2

Do you run your text code online on repl.it site? It can block your querySelector etc, check console tab if so.

3

I’m using PHPStorm and localhost.

4

Mind sharing your HTML?

5

HTML is very long and complex and contains some private information, so can only post some. Here is some of it:

<section class="my-5">
		<div class="container">
			<div class="row">
				<div class="col-md-12 mx-auto">
					<p class="headline">Tagline</p>
					<div class="card cardshowcase">
						<div class="card-body">
							<h5 class="card-title">Title</h5>
							<hr class="introcard" align="left">
							<div class="card-text">
								Hello there again
							</div>
						</div>
					</div>
					<br />
					<!-- right aligned card -->
					<div align ="right">
						<div class="card paddedcard cardshowcase">
							<div class="card-body" style="text-align: left">
								<h5 class="card-title" style="text-align: right">Who are we?</h5>
								<hr class="introcard" align="right">
								<div class="card-text">
									<div class="read-more-container">
										<p>Hello</p>
										<p class="extra_content">Hello there, this text is hidden</p>
										<button class="read_more_btn readmorestyling">Show More</button>
									</div>
8

Solved with this:

let readMoreBtns = document.querySelectorAll(".read_more_btn");
readMoreBtns.forEach(function(btn) {
  btn.addEventListener('click', changeClass);
})

function changeClass(event) {
  let btn = event.target,
    context = event.target.parentNode,
    toggleEl = context.querySelector(".extra_content");

  toggleEl.classList.toggle('show');

  if (toggleEl.classList.contains("show")) {
    btn.innerHTML = "Show Less";
  } else {
    btn.innerHTML = "Show More";
  }
}