Modify the colors of multiple texts using a concise code block of fewer than 20 lines

Question

Modify the colors of multiple texts using a concise code block of fewer than 20 lines

I have 8 paragraphs and I want to toggle the class 'one-active' when clicking on each of them, while removing the active class from the others. I currently have the code working for two paragraphs, but it's too lengthy for all eight. How can I achieve the same functionality with fewer lines of code?


      let paragraphs = document.querySelectorAll('p');
  
      function changeColor(index){
        paragraphs.forEach((p, i) => {
          if(i === index){
            p.classList.toggle('active');
          } else {
            p.classList.remove('active');
          }
        });
      }
  
      paragraphs.forEach((p, i) => {
        p.addEventListener('click', () => {
          changeColor(i);
        });
      });


      <style>
        p{
          color: rgb(11, 28, 47);
          background-color: rgb(255, 255, 255);
        }
        
        p.active{
          color: rgb(255, 255, 255);
          background-color: rgb(11, 28, 47);
        }
      </style>
      
      <p>COSA È</p>
      <p>COSA È</p>
      <p>COSA È</p>
      <p>COSA È</p>
      <p>COSA È</p>

javascript html css

Answer 1

Answer №1

Instead of creating a separate class for each p element, you can use a single CSS rule to indicate that an item is active. Also, rather than having a click handler for each individual element, you can set up a click handler on the parent element to manage activation and deactivation.

let container = document.querySelector(".container");

container.addEventListener("click", ({
  target
}) => {
  if (target.nodeName !== "P") return; // return if p is not clicked
  Array.from(document.querySelectorAll(".container>p")).forEach(p => p.classList.remove("active")); // make the others inactive
  target.classList.toggle("active");
});

.container p {
  color: rgb(11, 28, 47);
  background-color: rgb(255, 255, 2);
}

.container p.active {
  color: rgb(255, 255, 255);
  background-color: rgb(11, 28, 47) !important;
}

<div class="container">
  <p class="active">COSA È</p>
  <p>COSA È</p>
  <p>COSA È</p>
  <p>COSA È</p>
  <p>COSA È</p>
</div>

Answer 2

Instead of creating a separate class for each p element, you can use a single CSS rule to indicate that an item is active. Also, rather than having a click handler for each individual element, you can set up a click handler on the parent element to manage activation and deactivation.

let container = document.querySelector(".container");

container.addEventListener("click", ({
  target
}) => {
  if (target.nodeName !== "P") return; // return if p is not clicked
  Array.from(document.querySelectorAll(".container>p")).forEach(p => p.classList.remove("active")); // make the others inactive
  target.classList.toggle("active");
});

.container p {
  color: rgb(11, 28, 47);
  background-color: rgb(255, 255, 2);
}

.container p.active {
  color: rgb(255, 255, 255);
  background-color: rgb(11, 28, 47) !important;
}

<div class="container">
  <p class="active">COSA È</p>
  <p>COSA È</p>
  <p>COSA È</p>
  <p>COSA È</p>
  <p>COSA È</p>
</div>

Modify the colors of multiple texts using a concise code block of fewer than 20 lines

Answer №1

Similar questions

Understanding information in Backbone.js

Associate an alternate attribute that is not displayed in the HTML component

What could be the reason behind these links not affecting the height of my div element?

Obtain the href using a combination of xpath and id

The $resources headers have not been updated

Host an Angular app with views using Express.js - reloading is disabled

Utilizing Fullcalendar v5's sticky header feature alongside a Bootstrap fixed top navigation bar for a seamless

It is not possible to include a new property to an object while inside a function

When using Angular 5's ngModel, the user interface displays the updated value dynamically without requiring the

Attempted to identify whether an item exists in an array, and if it does, then add the item to the array; if not, then perform

Facing an error response with the Javascript callout policy in Apigee. Any suggestions on fixing this issue?

Set an attribute without replacing any existing class attributes

"Triggering an event when a checkbox in a list is clicked

Express.js and Node version 0.10.29: The Mystery Post

Using React.js to add MongoDB documents into the database

What is the method for retrieving JSON data within the AngularJS repeat directive?

Manually validate inputs in Angular

Guide to creating a distortion-free layout with Bootstrap 4

Maintaining the position of the screen as you type in information that is located outside of the container

What is the best way to combine MVVM, offline storage, and Knockout.js in a project?