CODEWITHSUNDEEP
javascript
coding4fun
coding4fun

Reputation: 8189

Getting the current element that invoked a function?

I've hooked a function to the same event of multiple controls:

element.onchange = SetSelected;

In SetSelected i need to know which element called me. I made the mistake of trying to do the the following:

element.onchange = SetSelected(element.id);

which of course calls the function which is not what i want.

I thought maybe the this keyword would provide me what i wanted but it doesn't (in the SetSelected function). 

var element = this;

I'm not using jquery and prefer not to add a dependency for such a trivial task.

for those who requested it here is the complete example:

var imageNumber = 12;
var elementId = "cphContent_rdoSelected";

window.onload = function () {
    for (var i = 1; i <= imageNumber; i++) {
        var element = document.getElementById(elementId + i.toString());

        //select the first element by default
        if (i === 1) {
            SetSelected(element.id);
        }
        element.onchange = SetSelected;
    }
};

function SetSelected() {
    for (var i = 1; i <= imageNumber; i++) {
        var radioButton = this;//document.getElementById(elementId + i.toString());

        var lbl = document.getElementById("lbl" + i.toString());

        if ( id === radioButton.id) {
            if (!radioButton.hasAttribute("checked")) {
                radioButton.setAttribute("checked","");
                lbl.style.display = "block";
            }
        }
        else {
            if (radioButton.hasAttribute("checked")) {
                radioButton.removeAttribute("checked");
            }
            lbl.style.display = "none";

        }
    }
};

Upvotes: 0

Views: 110

Answers (4)

Duncan
Duncan

Reputation: 1550

I suppose you could try this...
It's a complete rewrite of what you have, though.

var elementId = "cphContent_rdoSelected";
var elements;

function Window_OnLoad( event ) {
    elements = document.querySelectorAll( "input[id^='" + elementId + "']" );

    elements[0].setAttribute( "checked", "" );
    document.getElementbyId( elements[0].id.replace( elementId, "lbl" ) ).style.display = "block";

    for( var i = 0, len = elements.length; len > i; ++i ) {
        elements[0].addEventListener( "change", Radio_OnChange, false );
    }
}

function Radio_OnChange( event ) {
    var element = ( event.target )? event.target: event.srcElement;
    for( var i = 0, len = elements.length; len > i; ++i ) {
        elements[i].removeAttribute( "checked" );
        document.getElementbyId( elements[i].id.replace( elementId, "lbl" ) ).style.display = "none";
    }
    element.setAttribute( "checked", "" );
    document.getElementbyId( element.id.replace( elementId, "lbl" ) ).style.display = "none";
}

window.addEventListener( "load", Window_OnLoad, false );

Upvotes: 0

Felix Kling
Felix Kling

Reputation: 816364

Using this will work if you do element.onchange = SetSelected;. However, your problem seems to be with

if (i === 1) {
    SetSelected(element.id);
}

That won't work because this won't refer to the element, it will refer to window. You have to set this explicitly, via .call or .apply:

if (i === 1) {
    SetSelected.call(element);
}

Sources to learn about this:

Upvotes: 1

Shriike
Shriike

Reputation: 1341

You can access which element it was from the event parameter passed into your onchange.

Event Object

event.target || event.srcElement

That should get the element that was changed.

Upvotes: 0

michaelwayman
michaelwayman

Reputation: 196

try using

element.onchange = function() { SetSelected(element.id); };

Upvotes: 0

Related Questions