Display the corresponding div when the span class is updated

Question

Display the corresponding div when the span class is updated

If I have two span elements with class "selected" changing width based on selection, I just need to determine when span2 is selected.

<span class="swatch swatch-image span1">
<span class="swatch swatch-image span2 selected">

I want to detect which span is selected (has class "selected") and then show or hide a div elsewhere. Is this possible?

I've attempted the following approach:

let targetNode = document.getElementsByClassName('swatch swatch-image span2 selected');

const config = { attributes: true, childList: false, subtree: false, attributeFilter: ['class'] };

const callback = function(mutationsList, observer) {
    for (let mutation of mutationsList) {
        if (mutation.attributeName === "class") {
            var classList = mutation.target.className;
            if(/red/.exec(classList).length > 0) {
                console.log('Found match');
            }
        }
    }
};

const observer = new MutationObserver(callback);

observer.observe(targetNode, config);

observer.disconnect();

Is MutationObserver the correct method to listen for the selected span? I am not very familiar with javascript, do I need to call MutationObserver in a certain way after setting up the code?

javascript mutation-observers

Answer 1

Answer №1

Locate the nearest container that encloses the spans and assign the task

window.addEventListener('DOMContentLoaded',() => { // once the page is fully loaded
  const container = document.getElementById('someContainer'); // adjust as necessary 
  container.addEventListener('click', (e) => {
    const tgt = e.target.closest('span.swatch');
    if (!tgt) return; // not a swatch
    console.log(tgt.textContent, 'clicked')
    document.getElementById('showWhenSpan2').hidden = !tgt.matches('.span2')
  });

// somewhere else beyond your reach
  document.addEventListener('click', (e) => {
    const tgt = e.target.closest('span.swatch');
    if (!tgt) return; // not a swatch
    document.querySelectorAll('span.swatch').forEach(span => span.classList.toggle('selected',span===tgt))
  });



});

.selected { border: 1px solid red; }

<div id="someContainer">
...

<span class="swatch swatch-image span1 selected">Span 1</span>
<span class="swatch swatch-image span2">Span 2</span>


...
</div>

<div id="showWhenSpan2" hidden>Shown when span 2 is clicked</div>

Answer 2

Locate the nearest container that encloses the spans and assign the task

window.addEventListener('DOMContentLoaded',() => { // once the page is fully loaded
  const container = document.getElementById('someContainer'); // adjust as necessary 
  container.addEventListener('click', (e) => {
    const tgt = e.target.closest('span.swatch');
    if (!tgt) return; // not a swatch
    console.log(tgt.textContent, 'clicked')
    document.getElementById('showWhenSpan2').hidden = !tgt.matches('.span2')
  });

// somewhere else beyond your reach
  document.addEventListener('click', (e) => {
    const tgt = e.target.closest('span.swatch');
    if (!tgt) return; // not a swatch
    document.querySelectorAll('span.swatch').forEach(span => span.classList.toggle('selected',span===tgt))
  });



});

.selected { border: 1px solid red; }

<div id="someContainer">
...

<span class="swatch swatch-image span1 selected">Span 1</span>
<span class="swatch swatch-image span2">Span 2</span>


...
</div>

<div id="showWhenSpan2" hidden>Shown when span 2 is clicked</div>

Answer 3

Answer №2

Thanks to @mplungjan for the fantastic solution. The code is so tidy and efficient. Much appreciated. I managed to set the id of the parent div of span.swatch, but I needed to find the nearest div that I wanted to toggle hide/show because I needed to hide/show the entire tr element:

window.addEventListener('DOMContentLoaded', () => { // when page has loaded
  const container = document.getElementById('someContainer'); // adjust as necessary
  const container2 = document.getElementById('someOtherContainer'); // searching for the tr element's parent div
  const tr = container2.closest('tr');
  if (!tr) return;
  tr.style.display = "none";
  container.addEventListener('click', (e) => {
    const tgt = e.target.closest('span.swatch');
    if (!tgt) return; // not a swatch
    if (!tgt.matches('.span2')) {
      tr.style.display = "none";
    } else {
      tr.removeAttribute("style");
    }
  });
});

This is an updated version of the code to initially hide the <tr> and then toggle between display: none and removing the style attribute when the span2 element is clicked

Turns out, Javascript isn't as daunting as I had thought

Answer 4

Thanks to @mplungjan for the fantastic solution. The code is so tidy and efficient. Much appreciated. I managed to set the id of the parent div of span.swatch, but I needed to find the nearest div that I wanted to toggle hide/show because I needed to hide/show the entire tr element:

window.addEventListener('DOMContentLoaded', () => { // when page has loaded
  const container = document.getElementById('someContainer'); // adjust as necessary
  const container2 = document.getElementById('someOtherContainer'); // searching for the tr element's parent div
  const tr = container2.closest('tr');
  if (!tr) return;
  tr.style.display = "none";
  container.addEventListener('click', (e) => {
    const tgt = e.target.closest('span.swatch');
    if (!tgt) return; // not a swatch
    if (!tgt.matches('.span2')) {
      tr.style.display = "none";
    } else {
      tr.removeAttribute("style");
    }
  });
});

This is an updated version of the code to initially hide the <tr> and then toggle between display: none and removing the style attribute when the span2 element is clicked

Turns out, Javascript isn't as daunting as I had thought

Display the corresponding div when the span class is updated

Answer №1

Answer №2

Similar questions

Using Jquery to Switch Pages

What is the best way to utilize Vue in order to automatically scroll to the newest message whenever a new message is added?

Text field value dynamically changes on key press update

Strategies for Structuring Django and JavaScript Codebases

Using a Component's Variable in Another Component in React Native

Tips for parsing data arrays in HTML templates

Ways to retrieve a variable within the init() function

Upon invoking useEffect, the information is displayed, only to encounter an error when attempting to access

Leveraging ng-class for designing a favorite symbol

What are the different ways to share data between components in React?

Using Vue.js to toggle rendering based on checkbox selection

Detecting the presence of a mobile keyboard on a website: strategies and techniques

Locating elements with Selenium Webdriver using xpath

A guide on using Javascript to write information to a JSON file

Building a hybrid application in Angular using UpgradeModule to manage controllers

What is the best way to style radio boxes in HTML to resemble checkboxes and display X's when selected?

ajax-jquery request declined

Is it possible to access the chrome://webrtc-internals/ variables through an API in JavaScript?

JavaScript Document Object Model: Locate an element with a class that is either similar to or includes a specific substring

Using conditional CSS in React/Next.js