How to define several "id"s in one javascript code?

Question

The following script written for a progress bar, is assigned to a div with id=container1. This is while I have several divs with ids like container2, container3 and ... which all should be referred to this script.

How can I assign this script to all divs?

var bar = new ProgressBar.Line(container1, {
  strokeWidth: 4,
  easing: 'easeInOut',
  duration: 1400,
  color: '#66cc33',
  trailColor: 'transparent',
  trailWidth: 1,
  svgStyle: {
    width: '100%',
    height: '100%',
    position: 'absolute'
  }
});

bar.animate(1.0); // Number from 0.0 to 1.0

The ProgressBar.Line code is acting on the division by id="container1", I want it to work on divisions with id: container2, container3 and ... as well. — syzd
– syzd, Commented Aug 16, 2016 at 8:04

Benjamin Pajk · Accepted Answer · 2016-08-16 08:13:50Z

1

If I understand your question correctly you want several progressBar instances referenced to the same options object.

var progressBarOptions={
  strokeWidth: 4,
  easing: 'easeInOut',
  duration: 1400,
  color: '#66cc33',
  trailColor: 'transparent',
  trailWidth: 1,
  svgStyle: {
    width: '100%',
    height: '100%',
    position: 'absolute'
  }
}

var bar1 = new ProgressBar.Line(container1, progressBarOptions);
var bar2 = new ProgressBar.Line(container2, progressBarOptions);
var bar3 = new ProgressBar.Line(container3, progressBarOptions);

answered Aug 16, 2016 at 8:13

Benjamin Pajk

1011 silver badge4 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Bálint · Accepted Answer · 2016-08-16 08:04:55Z

0

If you don't use closures, then each of these containers are accessible from the window object and you can use array access to get the objects:

var containerCount = 5;
for (var i = 1; i <= containerCount; i++) {
    var bar = new ProgressBar.Line(window["container" + i, {
        // Stuff here
    }
}

If you do use closures then you need to put these in an object and use the same thing but replacing the window with the object's name.

answered Aug 16, 2016 at 8:04

Bálint

4,0692 gold badges19 silver badges28 bronze badges

Comments

Zmen Hu · Accepted Answer · 2016-08-16 08:53:24Z

0

It depends on the API of ProgressBar. You have to read the API document or the definition of ProgressBar.Line to figure out if new ProgressBar.Line(option) could return the same instance each time.

answered Aug 16, 2016 at 8:53

Zmen Hu

8054 silver badges12 bronze badges

Collectives™ on Stack Overflow

How to define several "id"s in one javascript code?

3 Answers 3

Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related