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

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

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