CODEWITHSUNDEEP
javascriptgetelementbyid
user2128093
user2128093

Reputation: 29

creating a generalized getElementByID javascript

I have a button with the value of test, and when the button is clicked, a javascript will run that will manipulate elements with the ID test1 and test2. The script would have to be able to handle the two elements (test1 and test2) separately.

I am trying to make a generalized script (i.e. not using the specific values of test but whatever is the value of the button being clicked). That way I wouldn't need to make 1000 different scripts for each button. There would basically be 1 script that would work so long as there is a button with correspondingly named elements.

Is this possible?

Upvotes: 1

Views: 129

Answers (4)

David Thomas
David Thomas

Reputation: 253308

I'd suggest the following approach (which feels a little excessive in some ways):

Object.prototype.filterSimilar = function(needle, prop, haystack){
    var elems = [],
        reg = new RegExp(needle);
    for (var i = 0, len = haystack.length; i<len; i++){
        if (reg.test(haystack[i].getAttribute(prop))){
            elems.push(haystack[i]);
        }
    }
    return elems;
};

Object.prototype.getSimilar = function(prop){
    var els = document.getElementsByTagName('*'),
        collection = [];
    if (this.length){
        for (var i = 0, len = this.length; i<len; i++){
            collection.push(this[i].filterSimilar(this[i].getAttribute(prop), prop, els));
        }
    }
    else {
        collection.push(this.filterSimilar(this.getAttribute(prop), prop, els));
    }
    return collection[0];
}; 

var similar1 = document.getElementsByTagName('span').getSimilar('id'),
    similar2 = document.getElementById('test').getSimilar('data-name');

console.log(similar1 + '\n' + similar2);

JS Fiddle demo.

This is, however, tested only in Chrome 25 on Win 7.

Upvotes: 0

Trevor Dixon
Trevor Dixon

Reputation: 24352

http://jsfiddle.net/xAWUx/1/

HTML:

<button class="action-btn" data-value="test">Test Button</button>
<button class="action-btn" data-value="garage">Test Button</button>

<input name="test1" value="test1">
<input name="test2" value="test2">
<input name="garage1" value="garage1">
<input name="garage2" value="garage2">

Using jQuery:

function manipulateElement(i, el) {
    var $el = $(el);
    // $el is a jQuery-wrapped element that has a
    // name attribute that starts with the data-value
    // attribute of the clicked button
    console.log($el);
}

$('.action-btn').click(function() {
    var val = $(this).data('value');
    var elementsToManipulate = $('* [name^=' + val + ']');
    elementsToManipulate.each(manipulateElement);
});

Upvotes: 0

fmsf
fmsf

Reputation: 37137

The most generalistic environment for DOM manipulation is jQuery which uses a sizzle to handle selectors.

It seems it is what you are looking for: http://jquery.com/ you can check it's source for inspiration.

Upvotes: 0

Explosion Pills
Explosion Pills

Reputation: 191729

I don't know what you mean by element name (the name attribute?) but querySelectorAll can do a lot of the work for you.

document.querySelectorAll('[name^=' + value + ']')

can be used to select all elements with a name attribute that starts with the contents of value.

http://jsfiddle.net/dDwfd/

As others have suggested, jQuery may be useful to you since it handles a lot of the iteration internally. The JS code would be much simpler: http://jsfiddle.net/dDwfd/1/

Upvotes: 2

Related Questions