The "Read more" button is displaying inaccurate data

Question

The "Read more" button is displaying inaccurate data

I have a problem with the read more buttons under my testimonials on the page.

The left button is working correctly, but the right button is displaying text from the wrong testimonial.

I'm not sure why this is happening as there are no console errors.

You can see the issue by visiting clientsforcounsellors.com and scrolling down to view the testimonials.

Here is the code for the left testimonial:

<!-- Quotation -->
                <p class="test-paragraph dark-grey-text mt-4"><i class="fas fa-quote-left pr-2"></i>"Harrison has been continually knowledgeable, patient, professional, and overall a fantastic help. He is clearly well informed in the digital marketing and web design field.<span class="dots">...</span><span class="read-more"> He always gives timely responses which are clear and helpful. The finished site looks professional and inviting – just what I wanted. I will recommend him to my colleagues. Thanks again, Harri."</span></p>

                <button onclick="readMore()" class="read-more-btn">Read More</button>

And here is the code for the right testimonial:

<p class="test-paragraph dark-grey-text mt-4"><i class="fas fa-quote-left pr-2"></i>"Harrison has been continually knowledgeable, patient, professional, and overall a fantastic help. He is clearly well informed in the digital marketing and web design field.<span class="dots">...</span><span class="read-more"> He always gives timely responses which are clear and helpful. The finished site looks professional and inviting – just what I wanted. I will recommend him to my colleagues. Thanks again, Harri."</span></p>

                <button onclick="readMore()" class="read-more-btn">Read More</button>

.read-more {
    display: none;
}

<script>

        var testParagraph = document.querySelectorAll(".test-paragraph");
        var i;
    
        for (i = 0; i < testParagraph.length; i++) {

          function readMore() {

          var dots = document.querySelector(".dots");
          var moreText = document.querySelector(".read-more");
          var btnText = document.querySelector(".read-more-btn");

          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";
            }
          }
        }

      </script>

javascript html css

Answer 1

Answer №1

you have the option to utilize a

const seeMore = () => {
  const button = event.target;
  const para = button.previousElementSibling;

  const dots = para.querySelector(".dots");
  const moreContent = para.querySelector(".see-more");

  if (dots.style.display === "hidden") {
    dots.style.display = "inline";
    button.innerText = "Show More";
    moreContent.style.display = "none";
  } else {
    dots.style.display = "hidden";
    button.innerText = "Show Less";
    moreContent.style.display = "inline";
  }
}

.see-more {
  display: none;
}

<!-- Quotation -->
<p class="custom-paragraph grey-text mt-4"><i class="fas fa-quote-left pr-2"></i>"Harrison has been continually knowledgeable, patient, professional, and overall a fantastic help. He is clearly well informed in the digital marketing and web design field.<span class="dots">...</span><span class="see-more"> He always gives timely responses which are clear and helpful. The finished site looks professional and inviting – just what I wanted. I will recommend him to my colleagues. Thanks again, Harri."</span></p>
<button onclick="seeMore()" class="see-more-btn">Show More</button>


<p class="custom-paragraph grey-text mt-4"><i class="fas fa-quote-left pr-2"></i>"Harrison has been continually knowledgeable, patient, professional, and overall a fantastic help. He is clearly well informed in the digital marketing and web design field.<span class="dots">...</span><span class="see-more"> He always gives timely responses which are clear and helpful. The finished site looks professional and inviting – just what I wanted. I will recommend him to my colleagues. Thanks again, Harri."</span></p>
<button onclick="seeMore()" class="see-more-btn">Show More</button>

preceding element resembling this.

Answer 2

you have the option to utilize a

const seeMore = () => {
  const button = event.target;
  const para = button.previousElementSibling;

  const dots = para.querySelector(".dots");
  const moreContent = para.querySelector(".see-more");

  if (dots.style.display === "hidden") {
    dots.style.display = "inline";
    button.innerText = "Show More";
    moreContent.style.display = "none";
  } else {
    dots.style.display = "hidden";
    button.innerText = "Show Less";
    moreContent.style.display = "inline";
  }
}

.see-more {
  display: none;
}

<!-- Quotation -->
<p class="custom-paragraph grey-text mt-4"><i class="fas fa-quote-left pr-2"></i>"Harrison has been continually knowledgeable, patient, professional, and overall a fantastic help. He is clearly well informed in the digital marketing and web design field.<span class="dots">...</span><span class="see-more"> He always gives timely responses which are clear and helpful. The finished site looks professional and inviting – just what I wanted. I will recommend him to my colleagues. Thanks again, Harri."</span></p>
<button onclick="seeMore()" class="see-more-btn">Show More</button>


<p class="custom-paragraph grey-text mt-4"><i class="fas fa-quote-left pr-2"></i>"Harrison has been continually knowledgeable, patient, professional, and overall a fantastic help. He is clearly well informed in the digital marketing and web design field.<span class="dots">...</span><span class="see-more"> He always gives timely responses which are clear and helpful. The finished site looks professional and inviting – just what I wanted. I will recommend him to my colleagues. Thanks again, Harri."</span></p>
<button onclick="seeMore()" class="see-more-btn">Show More</button>

preceding element resembling this.

Answer 3

Answer №2

In my experience, I would advise against declaring JavaScript events directly inside HTML tags like this:

<button onclick="readMore()"...

Instead, a better approach would be to utilize the forEach() method and the toggle() method for toggling the read-more class. Take a look at the revised code snippet below.

var btnText = document.querySelectorAll(".read-more-btn");
var moreText = document.querySelectorAll(".read-more");
var dots = document.querySelectorAll(".dots");

btnText.forEach(function(current_btn, index) {
    current_btn.addEventListener('click', function() {
      moreText[index].classList.toggle("read-more");
      
      if (dots[index].style.display == "none") {
        dots[index].style.display = "inline";
      } else {
        dots[index].style.display = "none";
      }

      if (current_btn.innerText == "Read More") {
        current_btn.innerText = "Read Less";
      } else {
        current_btn.innerText = "Read More";
      }
            
    });
});

.read-more {
    display: none;
}

<p class="test-paragraph dark-grey-text mt-4"><i class="fas fa-quote-left pr-2"></i>"Harrison has been continually
    knowledgeable, patient, professional, and overall a fantastic help. He is clearly well informed in the digital
    marketing and web design field.<span class="dots">...</span><span class="read-more"> He always gives timely
        responses which are clear and helpful. The finished site looks professional and inviting – just what I wanted. I
        will recommend him to my colleagues. Thanks again, Harri."</span></p>
<button class="read-more-btn">Read More</button>

<p class="test-paragraph dark-grey-text mt-4"><i class="fas fa-quote-left pr-2"></i>"Harrison has been continually
    knowledgeable, patient, professional, and overall a fantastic help. He is clearly well informed in the digital
    marketing and web design field.<span class="dots">...</span><span class="read-more"> He always gives timely
        responses which are clear and helpful. The finished site looks professional and inviting – just what I wanted. I
        will recommend him to my colleagues. Thanks again, Harri."</span></p>
<button class="read-more-btn">Read More</button>

Answer 4

In my experience, I would advise against declaring JavaScript events directly inside HTML tags like this:

<button onclick="readMore()"...

Instead, a better approach would be to utilize the forEach() method and the toggle() method for toggling the read-more class. Take a look at the revised code snippet below.

var btnText = document.querySelectorAll(".read-more-btn");
var moreText = document.querySelectorAll(".read-more");
var dots = document.querySelectorAll(".dots");

btnText.forEach(function(current_btn, index) {
    current_btn.addEventListener('click', function() {
      moreText[index].classList.toggle("read-more");
      
      if (dots[index].style.display == "none") {
        dots[index].style.display = "inline";
      } else {
        dots[index].style.display = "none";
      }

      if (current_btn.innerText == "Read More") {
        current_btn.innerText = "Read Less";
      } else {
        current_btn.innerText = "Read More";
      }
            
    });
});

.read-more {
    display: none;
}

<p class="test-paragraph dark-grey-text mt-4"><i class="fas fa-quote-left pr-2"></i>"Harrison has been continually
    knowledgeable, patient, professional, and overall a fantastic help. He is clearly well informed in the digital
    marketing and web design field.<span class="dots">...</span><span class="read-more"> He always gives timely
        responses which are clear and helpful. The finished site looks professional and inviting – just what I wanted. I
        will recommend him to my colleagues. Thanks again, Harri."</span></p>
<button class="read-more-btn">Read More</button>

<p class="test-paragraph dark-grey-text mt-4"><i class="fas fa-quote-left pr-2"></i>"Harrison has been continually
    knowledgeable, patient, professional, and overall a fantastic help. He is clearly well informed in the digital
    marketing and web design field.<span class="dots">...</span><span class="read-more"> He always gives timely
        responses which are clear and helpful. The finished site looks professional and inviting – just what I wanted. I
        will recommend him to my colleagues. Thanks again, Harri."</span></p>
<button class="read-more-btn">Read More</button>

Answer 5

Answer №3

querySelector selects only a single element even if there are multiple elements present. This is in contrast to getElementsByClassName which retrieves all elements and stores them in an array. Therefore, when using querySelector, only one element will be selected:

 var dots = document.querySelector(".dots"); // selects one .dots element from multiple .dots elements
 var moreText = document.querySelector(".read-more"); // selects one .read-more element from the class
 var btnText = document.querySelector(".read-more-btn"); // selects one .read-more-btn from the class

As a result, when the readMore() function is called, it chooses the first of the two elements (Gloria between Gloria and Tommy).

To target both elements within a for loop, utilizing getElementsByClassName or querySelectorAll would be beneficial.

        for (i = 0; i < testParagraph.length; i++) {

          function readMore() {

            var dots = document.querySelectorAll(".dots")[i];
            var moreText = document.querySelectorAll(".read-more")[i];
            var btnText = document.querySelectorAll(".read-more-btn")[i];

... 
}

Answer 6

querySelector selects only a single element even if there are multiple elements present. This is in contrast to getElementsByClassName which retrieves all elements and stores them in an array. Therefore, when using querySelector, only one element will be selected:

 var dots = document.querySelector(".dots"); // selects one .dots element from multiple .dots elements
 var moreText = document.querySelector(".read-more"); // selects one .read-more element from the class
 var btnText = document.querySelector(".read-more-btn"); // selects one .read-more-btn from the class

As a result, when the readMore() function is called, it chooses the first of the two elements (Gloria between Gloria and Tommy).

To target both elements within a for loop, utilizing getElementsByClassName or querySelectorAll would be beneficial.

        for (i = 0; i < testParagraph.length; i++) {

          function readMore() {

            var dots = document.querySelectorAll(".dots")[i];
            var moreText = document.querySelectorAll(".read-more")[i];
            var btnText = document.querySelectorAll(".read-more-btn")[i];

... 
}

The "Read more" button is displaying inaccurate data

Answer №1

Answer №2

Answer №3

Similar questions

Is it possible to create a mouse-following effect with lighting using Javascript

Issue adding dictionary value to an array in JavaScript

The body content of the webpage needs to be updated without altering the header and footer, all while avoiding a page

Slideshow development with code

Navigating to a specific page based on the selected option is the key to efficient web browsing

Setting the ajax mock calls count to zero in Jest test suites

Styling with CSS in a React component

Shopping cart has encountered an issue with storing the data correctly

What are the steps to implement a horizontal scroll feature on a website when the scroll width is set to 0?

What is the best way to manage a custom child event that is triggered using this.$emit in a parent component, specifically within the <script> section of the .vue file?

Create a timestamp with Javascript rendering

Highlight the active link in the parent node changes color when the child node is in focus

Tips for creating a full-screen background image using HTML and CSS

The function 'find' cannot be invoked on an undefined object

Utilizing the Twitter API with Next.js to automate tweets even when the website is not actively engaged

Encountering the "No injector found for element argument to getTestability" error while navigating between various single page applications

The placeholder attribute for input types does not display consistently across all browsers

Tips for resuming a video playback in HTML5 after pausing it for a brief moment

Discover the magic of retrieving element background images on click using jQuery

Integrating dual Google Maps onto a single HTML page