CODEWITHSUNDEEP
javascripthtmlgetelementbyid
larin555
larin555

Reputation: 1699

Custom attribute issue

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">

Upvotes: 1

Views: 107

Answers (7)

ThiefMaster
ThiefMaster

Reputation: 318518

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();

Upvotes: 0

David Thomas
David Thomas

Reputation: 253328

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']));​

JS Fiddle demo.

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:

Upvotes: 3

Joseph
Joseph

Reputation: 119847

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')

Upvotes: 0

Justin Thomas
Justin Thomas

Reputation: 5848

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.

Upvotes: 1

MilkyWayJoe
MilkyWayJoe

Reputation: 9092

As I understand it, document.getElementById takes one id at the time

Also, consider using html5 custom data attributes

Upvotes: 0

antyrat
antyrat

Reputation: 27765

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")

Upvotes: 0

jbabey
jbabey

Reputation: 46647

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.

Upvotes: 0

Related Questions