How to retrieve the reference to an html object the fired an event in JavaScript?

Question

I am pretty new in JavaScript and I have the following problem. Into a JSP page I have something like this:

    <tbody>
        <c:forEach items="${listaProgetti.lista}" var="progetto" varStatus="itemProgetto">
            <tr id='<c:out value="${progetto.prgPro}" />'>
                <td><input type="checkbox" class="checkbox" onchange="changeCheckbox()"></td>
                .....................................................
                .....................................................
                .....................................................
            </tr>
        </c:forEach>
    </tbody>

So a you can see clicking on the checkbox it is call this changeCheckbox() that actually is something very simple:

function changeCheckbox() {
    alert("INTO changeCheckbox()");
    
    var checkedRowList = new Array();
}

The problem is that into this function I have to retrieve what is the input object that fire the change event (I think something like the this)

How can I obtain the reference to the clicked checkbox in my previous changeCheckbox() function?

Oriol · Accepted Answer · 2015-09-30 13:32:25Z

6

The element is available in the event handler content attribute, not in changeCheckbox. But you can pass it as an argument.

Using this

changeCheckbox(this)

function changeCheckbox(elem) {
  elem.style.marginLeft = '100px';
}

<input type="checkbox" onchange="changeCheckbox(this)" />

Using event:

changeCheckbox(event.target)

function changeCheckbox(elem) {
  elem.style.marginLeft = '100px';
}

<input type="checkbox" onchange="changeCheckbox(event.target)" />

Note it would be better to use addEventListener:

document.querySelector('input').addEventListener('change', changeCheckbox);

Then the function changeCheckbox will receive the event object as its first parameter, and the current target element as the this value.

document.querySelector('input').addEventListener('change', changeCheckbox);
function changeCheckbox(e) {
  e.target.style.marginLeft = '100px';
}

<input type="checkbox" />

edited Sep 30, 2015 at 13:32

answered Sep 30, 2015 at 13:25

Oriol

291k71 gold badges459 silver badges535 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

How to retrieve the reference to an html object the fired an event in JavaScript?

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related