Update the innerHTML of several elements with minimal code needed

Question

Update the innerHTML of several elements with minimal code needed

I have a total of 6 buttons that, when clicked, reveal different div elements below them. I am looking to dynamically change the text content of each button upon being clicked. Managing this for a single button is straightforward:

<input type="checkbox" name="tabs" id="tab-one">
<label for="tab-one" id="one">Read More</label>

... and there are 5 more checkboxes with their respective labels.

var tabLabel = document.getElementById('one');
tabLabel.addEventListener("click", function() {
  if (this.innerHTML=="Read More") {
    this.innerHTML = "Collapse";
  } else {
    this.innerHTML = "Read More";
  }
});

I am seeking guidance on how to adapt this JavaScript code to handle all 6 unique labels effortlessly. Any suggestions would be greatly appreciated.

javascript innerhtml getelementbyid

Answer 1

Answer №1

To store a pair of values within the element, use the data-* attribute to set the .dataset property as JSON. Then, convert it to a JavaScript object in the event handler and update the .textContent with the value from the resulting array that is not the current element. Repeat this process for each element.

onload = () => {
  for (let label of document.querySelectorAll("label[for]")) {
    label.onclick = () => {
      let [curr, next, {textContent}] = [...JSON.parse(label.dataset.t), label];
      label.textContent = textContent === curr ? next : curr;
    }
  }
}

<label for="tab-one" id="one" data-t='["Read More", "Collapse"]'>Read More</label>
<label for="tab-two" id="two" data-t='["Read More", "Collapse"]'>Read More</label>
<label for="tab-three" id="three" data-t='["Read More", "Collapse"]'>Read More</label>
<label for="tab-four" id="four" data-t='["Read More", "Collapse"]'>Read More</label>
<label for="tab-five" id="five" data-t='["Read More", "Collapse"]'>Read More</label>
<label for="tab-six" id="six" data-t='["Read More", "Collapse"]'>Read More</label>

Answer 2

To store a pair of values within the element, use the data-* attribute to set the .dataset property as JSON. Then, convert it to a JavaScript object in the event handler and update the .textContent with the value from the resulting array that is not the current element. Repeat this process for each element.

onload = () => {
  for (let label of document.querySelectorAll("label[for]")) {
    label.onclick = () => {
      let [curr, next, {textContent}] = [...JSON.parse(label.dataset.t), label];
      label.textContent = textContent === curr ? next : curr;
    }
  }
}

<label for="tab-one" id="one" data-t='["Read More", "Collapse"]'>Read More</label>
<label for="tab-two" id="two" data-t='["Read More", "Collapse"]'>Read More</label>
<label for="tab-three" id="three" data-t='["Read More", "Collapse"]'>Read More</label>
<label for="tab-four" id="four" data-t='["Read More", "Collapse"]'>Read More</label>
<label for="tab-five" id="five" data-t='["Read More", "Collapse"]'>Read More</label>
<label for="tab-six" id="six" data-t='["Read More", "Collapse"]'>Read More</label>

Answer 3

Answer №2

Hey @jackton, here's a neat trick for you: Instead of fetching the element with getElementById in your event handler, you can simply pass it as a parameter. Check out this implementation:

var textArray = ['Hide', 'Show'...]; // Add all your toggle text here

function handleClick(element) {
    let index = textArray.indexOf(element.innerHTML);
    element.innerHTML = textArray[index % 2 ? index - 1 : index + 1];
}

Answer 4

Hey @jackton, here's a neat trick for you: Instead of fetching the element with getElementById in your event handler, you can simply pass it as a parameter. Check out this implementation:

var textArray = ['Hide', 'Show'...]; // Add all your toggle text here

function handleClick(element) {
    let index = textArray.indexOf(element.innerHTML);
    element.innerHTML = textArray[index % 2 ? index - 1 : index + 1];
}

Answer 5

Answer №3

To make use of the event agent, you can attach the event handler to the parent node of the six buttons.

The function for the handler should determine which button has been clicked. You can achieve this by utilizing the event.target property. Subsequently, modify the innerHTML of the target element (the button that was clicked).

var labelsParent = document.getElementById('one').parentNode;
labelsParent.addEventListener("click", function(event) {
    var target = event.target || event.srcElement;
  if (target.innerHTML=="Read More") {
    target.innerHTML = "Collapse";
  } else {
    target.innerHTML = "Read More";
  }
});

Answer 6

To make use of the event agent, you can attach the event handler to the parent node of the six buttons.

The function for the handler should determine which button has been clicked. You can achieve this by utilizing the event.target property. Subsequently, modify the innerHTML of the target element (the button that was clicked).

var labelsParent = document.getElementById('one').parentNode;
labelsParent.addEventListener("click", function(event) {
    var target = event.target || event.srcElement;
  if (target.innerHTML=="Read More") {
    target.innerHTML = "Collapse";
  } else {
    target.innerHTML = "Read More";
  }
});

Answer 7

Answer №4

Big shoutout to everyone who contributed their answers, but the solution I ended up using was a straightforward forEach loop where each label was assigned the same class. It worked like a charm. Special thanks to @awesomeCoder for also providing a helpful solution.

<input type="checkbox" name="tabs" id="tab-one">
<label for="tab-one" class="one">Show More</label>

var elements = document.querySelectorAll('.one');
elements.forEach(function(elem) {
  elem.addEventListener("click", function() {
    if (this.innerHTML=="Show More") {
      this.innerHTML = "Show Less";
    } else {
      this.innerHTML = "Show More";
    }
  });
});

Answer 8

Big shoutout to everyone who contributed their answers, but the solution I ended up using was a straightforward forEach loop where each label was assigned the same class. It worked like a charm. Special thanks to @awesomeCoder for also providing a helpful solution.

<input type="checkbox" name="tabs" id="tab-one">
<label for="tab-one" class="one">Show More</label>

var elements = document.querySelectorAll('.one');
elements.forEach(function(elem) {
  elem.addEventListener("click", function() {
    if (this.innerHTML=="Show More") {
      this.innerHTML = "Show Less";
    } else {
      this.innerHTML = "Show More";
    }
  });
});

Update the innerHTML of several elements with minimal code needed

Answer №1

Answer №2

Answer №3

Answer №4

Similar questions

There seems to be a display issue with the DataTables tables

How can I align a fixed-width div beside a floating div that is in percentage?

In Angular, leverage RxJS to call a secondary subscription within a pipe operator, enabling the manipulation of a variable from the

Adjust the class of a div element located close to its ancestor using JavaScript

Is there an undefined error when clicking on a row in a dynamically created table?

Issue with z-index causing the image to not display when navigating through an image gallery with previous and next buttons using

Checking types in Angular with interfaces

What is the process for selectively adding interceptors to app.module?

Differences in behavior of Backbone.js Ajax calls between Chrome and Firefox

Retrieving data for a route resolver involves sending HTTP requests, where the outcome of the second request is contingent upon the response from the first request

I am encountering difficulty with importing this particular file

Easily transform checkboxes into images using jQuery with no need for external plugins

How can you ensure that the Data Point Values are always displayed when using arrayToDataTable in the Google Charts API?

Strategies for obtaining newly updated data with every request and implementing a no-cache approach in Apollo GraphQL and Angular

Step-by-step guide for integrating a Firebase-exported database into mLab

Why does Vue continuously insert undefined values when adding non-consecutive indexes to an array?

Expanding the base class attribute in Typescript

Program that extracts information from interactive controls

How can we alert users when data has been updated without the need for a page

Extracting information from the responseText of an XMLHttpRequest