I'm trying to get the "quantity" attribute of multiple Elements ID at the same time.
Here's what I tried :
productMinimum : document.getElementsById("id1","id2").getAttribute("quantity")
How can I make this work? The "id1" and "id2" elements all have the "quantity" attribute.
Here's what it looks like from the HTML side :
<li class="product" name="RD-101" id="id1" price="18" quantity="2">
<li class="product" name="RD-101" id="id2" price="18" quantity="4">
The problem you're having is that getElementsById() doesn't exist (unless you've defined it elsewhere). What you should be using is getElementById(), albeit twice (as getElementById(), as its name implies, returns only one element, even if there are multiple elements with that same id, which is invalid mark-up, so please don't do that), and then pushing the returned elements into an array:
var products = [];
products.push(document.getElementById("id1"));
products.push(document.getElementById("id2"));
You could, of course, create your own function to return multiple elements based on their id:
function getElementsById(ids) {
if (!ids) {
return false;
}
else {
var elems = [];
for (var i = 0, len = ids.length; i < len; i++) {
if (document.getElementById(ids[i])) {
elems.push(document.getElementById(ids[i]));
}
}
return elems;
}
}
console.log(getElementsById(['id1','id3']));
Bear in mind, though, that this returns a regular array, not a nodeList (as would be returned, for example, by getElementsByClassName()). And the returned array, even if it's only a single element, would have to be iterated over in the same way as any other array.
References:
id of 'products'.function getQuantity(id) {
return document.getElementById(id).getAttribute("quantity");
}
var quantId1 = getQuantity('id1');
var quantId2 = getQuantity('id2');
getElement*s*ById is returning an array. You need to get the individual items. If you had a whole lot of elements you could select by class product and write a simple function to loop over them and create an array.
There is no such function as getElementsById. you can use either getElementsByClassName or getElementsByName
https://developer.mozilla.org/en/DOM/document.getElementsByName https://developer.mozilla.org/en/DOM/document.getElementsByClassName
Take note that getElementsByClassName is fairly new and not supported by older browsers.
Using pure JavaScript you need to write your own function for that:
function getQuantities() {
var args = Array.prototype.slice.call(arguments);
var quantityValue = 0;
for(var i = 0; i < args.length; i++) {
quantityValue += document.getElementsById(args[i]).getAttribute("quantity");
}
return quantityValue;
}
// your code
productMinimum : getQuantities("id1","id2")
As I understand it, document.getElementById takes one id at the time
Also, consider using html5 custom data attributes
There is no such thing as getElementsById()
But there is querySelectorAll, but it's not supported in IE7 and older though
here's a sample which should return the two <li> in a nodelist.
document.querySelectorAll('#id1, #id2')
You can only get one element at once (with getElementById()). If you want an array containing the quantities, use this:
[document.getElementById('id1').getAttribute('quantity'), document.getElementById('id2').getAttribute('quantity')]
Consider using jQuery, there you can use $('#id1, #id2') and besides that it supports easy access to data- attributes - what you are doing right now is invalid HTML since li does not have price or quantity attributes:
<li class="product" name="RD-101" id="id1" data-price="18" data-quantity="2">
<li class="product" name="RD-101" id="id2" data-price="18" data-quantity="4">
To get the quantities array:
$('#id1, #id2').map(function() { return $(this).data('quantity'); }).get();
