I have a problem with code getElementsByClassName('container').style.display='block'; somehow it doesnt work when I click on a button with this code:

I also can upload this script to my website so you an see if needed.

<div id="startStopBtn" onclick="startStop()"></div>

It should show up this code and it doesn't do so:

<div class="container">
            <center><?php echo $small_ads_id ; ?></center>
        <div id="test">
            <div class="testGroup" id="nomob">
                <div class="testArea">
                    <div class="icontest"><i class="fas fa-unlink"></i></div>
                    <div class="testName">Jitter</div>
                    <canvas id="jitMeter" class="meter"></canvas>
                    <div id="jitText" class="meterText"></div>
                    <div class="unit">ms</div>
                </div>
                <div class="testArea">
                    <div class="icontest"><i class="fas fa-link"></i></div>
                    <div class="testName">Ping</div>
                    <canvas id="pingMeter" class="meter"></canvas>
                    <div id="pingText" class="meterText"></div>
                    <div class="unit">ms</div>
                </div>
            </div>
            <div class="testGroup">
                <div class="testArea">
                <div class="testAreastyle">
                    <div class="icontest"><i class="fas fa-download"></i></div>
                    <div class="testName">Download</div>
                </div>  
                    <canvas id="dlMeter" class="meter"></canvas>
                    <div id="dlText" class="meterText"></div>
                    <div class="unit">Mbps</div>
                </div>
                <div class="testArea">
                    <div class="icontest"><i class="fas fa-upload"></i></div>
                    <div class="testName">Upload</div>
                    <canvas id="ulMeter" class="meter"></canvas>
                    <div id="ulText" class="meterText"></div>
                    <div class="unit">Mbps</div>
                </div>
            </div>
            <div style="display: none; " id="ipArea">
                IP Address: <span id="ip"></span>
            </div>
        </div>
        <script type="text/javascript">setTimeout(initUI,100);</script>
        <div class="fbdiv">
            <a rel="nofollow" href="http://www.facebook.com/share.php?u=<;<?php echo $website_url ; ?>>" onclick="return fbs_click()" target="_blank" class="fblink">
                <i class="fab fa-facebook-square"></i> Share on Facebook 
            </a>
        </div>  
        </br>
        <center>
            <?php echo $big_ads_id ; ?>         
        </br>
            <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
            <div id="counter-area-winkey">Real time <span id="counter-winkey"></span> visitors right now</div>
            <script>
                function r(t,r){return Math.floor(Math.random()*(r-t 1) t)}var interval=2e3,variation=5,c=r(500,2e3);$("#counter-winkey").text(c),setInterval(function(){var t=r(-variation,variation);c =t,$("#counter-winkey").text(c)},interval);
            </script>
        </center>
    </div>  

The startStop funcion:

function startStop(){
        document.getElementsByClassName('container').style.display='block';
        if(w!=null){
            w.postMessage('abort');
            w=null;
            data=null;
            I("startStopBtn").className="";
            initUI();
        }else{
            w=new Worker('netspeed/speedtest_worker.min.js');
            w.postMessage('start'); 
            I("startStopBtn").className="running";
            w.onmessage=function(e){
                data=JSON.parse(e.data);
                var status=data.testState;
                if(status>=4){
                    I("startStopBtn").className="";
                    w=null;
                    updateUI(true);
                }
            };
        }
    }

Thanks for reply

CodePudding user response：

That's because document.getElementsByClassName returns a list. So, you have to add an index there.
If that container class is on 1 element only then just write

document.getElementsByClassName('container')[0].style.display = block
//see the [0] after ('container')

If there are multiple elements having container class then you might want to loop through all of them with a for loop

CodePudding user response：

getElementsByClassName gives a list object of the elements which have the class name.

Array.from(document.getElementsByClassName('container')).forEach(container => container.style.display = 'none');

or

function setStyleProp(element, prop, val) {
    let elements = [];
    
    if (element instanceof HTMLElement) elements = [element];
    else if (typeof element === 'object') elements = Object.values(element);

    elements.forEach(el => el.style[prop] = val);
    return elements;
}

setStyleProp(document.getElementsByClassName('container'), 'display', 'none');

CodePudding user response：

[...document.getElementsByClassName("containerClass")].forEach(
    (container) => {
        return (container.style.display = 'none')
    }
);