How to get an array of Element objects with javascript

Question

I am using a javascript plugin for gauges (http://bernii.github.io/gauge.js/).

The plugin works perfectly, but I can only make it work by using (getElementById) I want to be able to have several instances of this plugin on the same page (without repeating the code for each one), but all other javascript selectors (getElementByClass), (querySelectorAll), etc, return a list of NODE OBJECTS, instead of "ELEMENT OBJECTS" as the (getElementById) method does.

var opts ={
  lines: 12,
  angle: 0.15,
  lineWidth: 0.44,
  pointer: {
    length: 0.9,
    strokeWidth: 0.035,
    color: '#000000'
  },
  limitMax: 'false',
  colorStart: '#6FADCF',
  colorStop: '#8FC0DA',
  strokeColor: '#E0E0E0',
  generateGradient: true
};

// this works
/*
var target = document.getElementById('gauge1');
var value = target.getAttribute('data-level');
var gauge = new Gauge(target).setOptions(opts);
gauge.maxValue = 1000; 
gauge.animationSpeed = 32;
gauge.set(value);

*/

// this does not work
var target = document.getElementsByClassName('gauge');
for(var i=0; i<target.length; i++)
{
  var value = target[i].getAttribute('data-level');
  var gauge = new Gauge(target[i]).setOptions(opts);
  gauge.maxValue = 1000; 
  gauge.animationSpeed = 32; 
  gauge.set(value);
}

<script src="http://bernii.github.io/gauge.js/dist/gauge.min.js"></script>
<!DOCTYPE html>
<html>
  <head>
  </head>
  <body>
    <canvas class='gauge' id="gauge1" data-level='900'></canvas>
    <canvas class='gauge' id="gauge2" data-level='800'></canvas>
    <canvas class='gauge' id="gauge3" data-level='700'></canvas>
  </body>
</html>

So my question is: Is there a way to get an array of "ELEMENT OBJECTS" without using Id ?

camilo · Accepted Answer · 2016-01-08 14:01:24Z

1

The answer to this question is very simple and didn't have anything to do with nodes and elements.

I was writing "getelementbyclass" instead of "getelementbyclassname" (syntax error)
"value" was entered as a string into the plugin and therefore, the plugin was not correctly entered. I needed to add parseInt and it worked.

answered Jan 8, 2016 at 14:01

camilo

1111 silver badge5 bronze badges

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

1 Comment

Jaromanda X Over a year ago

it's actually getElementsByClassName

Sam Hanley · Accepted Answer · 2016-01-08 18:24:43Z

0

In your case you can also use:

var target = document.getElementsByTagName('canvas');

edited Jan 8, 2016 at 18:24

Sam Hanley

4,7557 gold badges39 silver badges65 bronze badges

answered Jan 8, 2016 at 14:27

rdn87

7245 silver badges18 bronze badges

Collectives™ on Stack Overflow

How to get an array of Element objects with javascript

2 Answers 2

1 Comment

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Related