如何观察HTML类的变化来改变innerHTML属性

Question

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

Answer 1

You should check MutationObserver

It is doing exactly what you want

Answer 2

    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);

Answer 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});