'How to observe changes in HTML classes to change the innerHTML property

I'm trying to change a number on the webpage to display the current page number whenever there is a change in the classes of the DIV element.

    <div id="fullpage">
        <div class="hover_color"></div>
        <div id="main_wrapper">
            <!--Section 1-->
            <div class="section" id="section0">
                <h1>Hello.</h1>
            </div>

I'm using fullpagejs plugin which dynamically adds classnames to the currently viewed section; in this case, the class = "section" changes to class="section fp-section active fp-completely".

Outside this markup is another div with position:fixed

    <div id="inc" class="inc_num">
            <p>00.</p>

    </div>

I'm looking to change the value of 01 to 02 when the 2nd section is active and 02 to 03 when 3rd section is active.

I'm running this javascript to achieve this result.

const numberShow = function() {
const detectSection = document.getElementsByClassName('section fp-section active fp-completely')[0].id;
const inc = document.getElementById('inc');

switch (detectSection) {
    case section0:
        inc.innerHTML = '00.';
    case section1:
        inc.innerHTML ='01.';
        break;
    case section2:
        inc.innerHTML ='02.';
        break;
    case section3:
        inc.innerHTML ='03.';
        break;
    case section4:
        inc.innerHTML ='04.';
        break;
    case section5:
        inc.innerHTML ='05.';
        break;
    case section6:
        inc.innerHTML ='06.';
        break;

    default:
        break;
}
};
//Call numberShow every 500 millisecs to check current active class and 
//change the number
setInterval(numberShow(), 500);

This however, isn't working

javascripthtmldom-manipulation


Solution 1:[1]

    let detectSection, detectFooter, section, footer;
    const numberShow = () => {
    detectSection = document.getElementsByClassName('section fp-section active 
    fp-completely');
    if(detectSection !== null){
    section = detectSection[0].id;
    }else{
    detectFooter = document.getElementsByClassName('section fp-auto-height fp- 
    section active fp-completely');
    footer = detectFooter[0].id;
    }
    const num = document.getElementById('inc');


    if(section == 'section0'){
    num.innerHTML ='<p>00.</p><b></b>'; 
     } else if(section == 'section1'){
    num.innerHTML ='<p>01.</p><b></b>'; 
    }else if(section == 'section2'){
    num.innerHTML ='<p>02.</p><b></b>'; 
    }else if(section == 'section3'){
    num.innerHTML ='<p>03.</p><b></b>'; 
    }else if(section == 'section4'){
    num.innerHTML ='<p>04.</p><b></b>'; 
    }else if(section == 'section5'){
    num.innerHTML ='<p>05.</p><b></b>'; 
    }else if(section == 'section6'){
    num.innerHTML ='<p>06.</p><b></b>'; 
    }else if(section == 'section7'){
    num.innerHTML = '';
    }
    }
    setInterval(numberShow, 200);

Solution 2:[2]

You should check MutationObserver

It is doing exactly what you want

Solution 3:[3]

Use the observe() method of the MutationObserver interface, with the attributeFilter option, specifying the attribute names to be monitored (class in your case):

const observedElement = document.getElementById("observed-element");

const classObserver = new MutationObserver(() => {
  console.log("The class attribute has changed")
});

classObserver.observe(observedElement, {attributeFilter: ["class"]});


const observedElement = document.getElementById("observed-element");

const classObserver = new MutationObserver(() => {
  renderClasses();
  alert("The class attribute has changed");
});

classObserver.observe(observedElement, {attributeFilter: ["class"]});

const toggleClassButton = document.getElementById("toggle-class");
toggleClassButton.addEventListener("click", () => {
  observedElement.classList.toggle("another-class");
});

function renderClasses() {
  const classes = observedElement.classList;
  const classListElement = document.getElementById("class-list");
  classListElement.innerText = classes;
}

renderClasses();
p {
  margin-block: 10px;
  padding: 10px;
  width: fit-content;
  background: lightgreen;
  border: 1px solid green;
  border-radius: 3px;
}

span {
  color: red;
}

button {
  padding: 10px;
}
<p id="observed-element" class="one-class">I'm the element observed and my classes are: <span id="class-list"></span></p>
<button id="toggle-class">Toggle class "another-class"</button>

If you want to observe to all attributes modifications you can pass the attributes option set to true instead of the attributeFilter:

classObserver.observe(observedElement, {attributes: true});

Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution Source
Solution 1 acescoder
Solution 2 Kirill
Solution 3 Bernat

Related Questions