Get ID of element clicked

Question

<html>
<head>

<script type="text/javascript">
function getElement(e) {
    var element = e.target || e.srcElement;
    alert(element.id);
}
</script>

</head>
<body onclick="getElement()">

<div id="div1"></div>
<div id="div2"></div>

</body>
</html>

Tried this to get the ID of element clicked and alert it. I'm sure it's something pretty basic I'm missing.

Can anyone help?

Answer 1

It's actually pretty basic, stop using inline event handlers

<!DOCTYPE html>
    <head>
        <title>It works</title>
    </head>
    <body>

        <div id="div1"></div>
        <div id="div2"></div>

        <script type="text/javascript">
            document.addEventListener('click', function(e) {
                alert( e.target.id );
            }, false);
        </script>
    </body>
</html>

FIDDLE

Answer 2

In this particular case, you need to actually send in the event object when binding to the onclick handler (example below).

However, I would strongly advise against using this approach!

Use document.addEventListener instead.

 <html> <head> <script type="text/javascript"> function getElement(e) { var element = e.target || e.srcElement; alert(element.id); } </script> </head> <body onclick="getElement(event)"> <div id="div1">First Div</div> <div id="div2">Second Div</div> </body> </html>

Get ID of element clicked

Question

2 answers

solution1
3 ACCPTED 2015-02-11 00:31:28

solution2
1 2015-02-11 00:33:17

Get ID of element clicked

Question

2 answers

solution1 3 ACCPTED 2015-02-11 00:31:28

solution2 1 2015-02-11 00:33:17

solution1
3 ACCPTED 2015-02-11 00:31:28

solution2
1 2015-02-11 00:33:17