Change Font Size of Multiple Paragraphs Using CSS & JavaScript With HTML Classes.

Question

I have developed a script using HTML, CSS & JavaScript to change the default font size of several paragraphs. These paragraphs have a common class i.e. size-change-01.

Full source code is as follows.

 function resizeTextnew(multiplier) {
            if (document.getElementsByClassName("size-change-01").style.fontSize == "") {
                document.getElementByClassName("size-change-01").style.fontSize = "1.0em";
            }
            document.getElementByClassName("size-change-01").style.fontSize = parseFloat(document.getElementByClassName("size-change-01").style.fontSize) + (multiplier * 0.2) + "em";
        }

* {
            font-family: calibri;
        }
        
        img {
            height: 100px;
            width: 100px;
        }
        
        .size-change-01
        {
            font-size: 18px;
        }
        
        .myPara {
            text-align: center;
            border: 2px solid #C70039;
            margin: 0 0 20px 0;
        }
        
        .myButtons {
            border: 2px solid #FF5733;
            display: table;
            margin: 0 auto;
            padding: 20px 50px 50px 50px;
        }
        
        .increase{margin: 0 5px 0 0;}
        .decrease{margin: 0 0 0 5px;}

 <div class="myPara">
        <p class="size-change-01">The Quick Brown Fox Jumps Over The Lazy Dog! </p>
    </div>

    <div class="myButtons">
        <h4>Change Font Size</h4>
        <button class="increase" onclick="resizeTextnew(1)" />Increase Size</button>
        <button class="decrease " onclick="resizeTextnew(-1)" />Decrease Size</button>
    </div>

This code doesn't work as expected. When I check using the console view, there is an error for the fontSize property in the following JavaScript function:

 function resizeTextnew(multiplier) {
        if (document.getElementsByClassName("size-change-01").style.fontSize == "") {
            document.getElementByClassName("size-change-01").style.fontSize = "1.0em";
        }
        document.getElementByClassName("size-change-01").style.fontSize = parseFloat(document.getElementByClassName("size-change-01").style.fontSize) + (multiplier * 0.2) + "em";
    }

Is there a limitation with fontSize with JavaScript and CSS? If so what can we do to solve the issue?

I like to use only JavaScript. JQuery will be my last resort.

Please help me on this.

Thanks, Chiranthaka