CODEWITHSUNDEEP
javascriptjquerydomevent-handlingjquery-events
Yatko
Yatko

Reputation: 8805

getElementByClassName does not work where getElementById does (browser supported)

The script that works:

function getEventTarget(e) {
    e = e || window.event;
    return e.target || e.srcElement; 
}
var ul = document.getElementById('commandList');
ul.onclick = function(event) {
    var target = $(getEventTarget(event)).clone().children().remove().end().text();
    document.getElementById('inputCommand').value = target;
};

var interface = '/cgi-bin/CGIProxy.fcgi?cmd=';
var protocol = 'http://';
var host, command, access, commandUrl;

$('.sendCommand').click(function() {
    host = $('#cameraLocation').val();
    access = $('#cameraAccess').val();
    command = $('#inputCommand').val() + $('#inputParam').val();
    commandUrl = protocol + host + interface + command + access;                
    $('#showUrl').html(commandUrl);
    $('#showResult').attr('src', commandUrl);
});

When I'm changing document.getElementById to document.getElementsByClassName (the element in question has both ID and Class as "commandList") the script does not work any more, what am I missing?

New script:

function getEventTarget(e) {
    e = e || window.event;
    return e.target || e.srcElement; 
    }
var ul = document.getElementsByClassName('commandList');
ul.onclick = function(event) {
    var target = $(getEventTarget(event)).clone().children().remove().end().text();
    document.getElementById('inputCommand').value = target;
    };

var interface = '/cgi-bin/CGIProxy.fcgi?cmd=';
var protocol = 'http://';
var host, command, access, commandUrl;

$('.sendCommand').click(function() {
    host = $('#cameraLocation').val();
    access = $('#cameraAccess').val();
    command = $('#inputCommand').val() + $('#inputParam').val();
    commandUrl = protocol + host + interface + command + access;                
    $('#showUrl').html(commandUrl);
    $('#showResult').attr('src', commandUrl);
});

Upvotes: 0

Views: 102

Answers (2)

David Thomas
David Thomas

Reputation: 253506

getElementsByClassName() returns a NodeList of elements, whereas getElementById() (and querySelector()) return a single node.

To operate on the array-like NodeList you have to iterate over each element contained within the NodeList and specify the actions for each one individually; for example:

Array.prototype.forEach.call(document.getElementsByClassName('whatever'), function (elem) {
    elem.onclick = function () {
        // do stuff;
    }
});

Or:

Array.prototype.forEach.call(document.getElementsByClassName('whatever'), function (elem) {
    elem.addEventListener('click', functionToCallOnClick);
});

Upvotes: 1

David Hughes
David Hughes

Reputation: 370

getElementsByClassName() returns a HTMLCollection of the matched elements, as multiple elements can share a common class attribute.

You'll have to loop through the returned elements and make relevant modifications to your code to adjust for this.

See: https://developer.mozilla.org/en-US/docs/Web/API/document.getElementsByClassName

Upvotes: 3

Related Questions