Question

196

Change style.width of a div by class name

rated 0 times [ 200] [ 4] / answers: 1 / hits: 28559 / 11 Years ago, wed, february 26, 2014, 12:00:00

I've been trying to change the width of a div with a set.interval animation. It works perfectly fine with getELementByID, but it won't work with getElementsByClassName.

The code is the following:

var loadingBar = 200;



function animationBarOne(){

    document.getElementsByClassName(loading-bar).style.width=(loadingBar+px);

    loadingBar++;

    if(loadingBar === 900){

         clearInterval(intervalId);

    }

}

var intervalId = setInterval(animationBarOne,1);

I'm getting can't set property width of undefined. As I said it works perfectly with ID, but giving I have like 10 bars to animate I rather use class name so its cleaner.

Thanks in advance.

Answers

Only authorized users can answer the question. Please sign in first, or register a free account.

lizet

Add To Favorites

Follow

Total Points: 479

Total Questions: 96

Total Answers: 113

Location: Mexico

Member since Sun, Jul 25, 2021

3 Years ago

lizet questions

1 Why is string.replaceAll() not a function on Android React Native?

Thu, Sep 23, 21, 00:00, 3 Years ago

1 Cannot read properties of undefined (reading 'indexOf') with Firebase v9 Modular React JS

Thu, Sep 16, 21, 00:00, 3 Years ago

1 Uncaught TypeError: Cannot read property 'ContentContainer' of undefined

Thu, Jul 15, 21, 00:00, 3 Years ago

1 How to conditionally create object property in one line?

Wed, Jun 2, 21, 00:00, 3 Years ago

1 Error when calling await browser.close(): (node:4960) UnhandledPromiseRejectionWarning: page.goto: Navigation failed because page was closed

Mon, Mar 29, 21, 00:00, 3 Years ago

View All

answered 11 Years ago noe · Accepted Answer

document.getElementsByClassName() returns an array of elements. You need to loop through the array to modify each one in the list:

var loadingBar = 200;



function animationBarOne(){    

    var elements = document.getElementsByClassName(loading-bar);

    for (var i = 0; i < elements.length; i++) {

        elements[i].style.width=(loadingBar+px);

    }

    loadingBar++;

    if(loadingBar === 900){

         clearInterval(intervalId);

    }

}

var intervalId = setInterval(animationBarOne,1);