Javascript: onclick function to get elements

Question

I'm trying to get the elements of the clicked source, but I don't know why it isn't working.

HTML:

<span class="populate" onclick="populate();" href="?id=1">Hello</span>

CSS:

.populate {
    cursor: pointer;
}

JS:

function populate(event) {
    var event = event || window.event;
    var src = event.srcElement;
    var href = src.getAttribute('href');
    alert(href);
}

The error I see in console is that the function populate is not defined.

Any help or suggestions will be appreciated!

var src = event.target || event.srcElement; [Updated jsFiddle](http://jsfiddle.net/GKDev/HdvGD/2/) — Givi, Jul 19 '13 at 13:01

score 2 · Answer 1 · answered Jul 19 '13 at 13:05

The problem is with the order of the javascript and the span tag.

put the javascript function before the tag

JS

    function populate(event) {
        var event = event || window.event;
        var src = event.srcElement;
        var href = src.getAttribute('href');
        alert(href);
    }

html

<span class="populate" onclick="populate();" href="?id=1">Hello</span>

We need to define functions before calling them. Fiddle here http://jsfiddle.net/HdvGD/7/

score 1 · Accepted Answer · edited May 23 '17 at 11:56

You code works fine in fiddle. The reason you didn't get it because you wrapped in onload() instead do it in No wrap in Head (fiddle at left top)

your fiddle1

Incase you want in onload() assign like variable

populate = function (event) {
    var event = event || window.event;
    var src = event.srcElement;
    var href = src.getAttribute('href');
    alert(href);
}

Check is fiddle2

Check this [answer to find the difference]

Update:

Sorry for pointing depreciated one(I'hv removed it). Event object "event" is not passed from the parameter. Actually here is a simple one passing the event from onclick like

 onclick="populate(event);"

then simple pass it and access like below

 function populate(event) {
    var src = event.target || event.srcElement;
    var href = src.getAttribute('href');
    alert(href);
}

Final Fiddle

Thank you, the third fiddle works great. Please can you explain why, would love to know! — designtocode, Jul 19 '13 at 14:14
@msbodetti sorry the previous which I mentioned is depreciated. Some browsers still need the `event` object to be passed as parameter. But I didn't expect FF is not handling this. Hope you understand. — Praveen, Jul 19 '13 at 14:52

score 0 · Answer 3 · answered Jul 19 '13 at 12:57

0

Anchor tags contain href attribute

 <a class="populate" id="link" onclick="populate(this.id);" href="......">Hello
</a>



   function populate(id)
   {
       var someimage = document.getElementById(id);
       var mysrc = someimage .src;

   }

answered Jul 19 '13 at 12:57

PSR

36,137
33
104
147

score 0 · Answer 4 · answered Jul 19 '13 at 13:03

Use jquery to get it work as simple

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>

     <script type="text/javascript">            

        $(document).ready(function() {
            $("#populate").click(function(event) {
                alert("As you can see, the link no longer took you to jquery.com");
                var href = $('#populate').attr('href');
                alert(href);
                event.preventDefault();
            });
        });



        </script>
</head>

<body>

<span class="populate" id="populate" onclick="populate();" href="?id=1" >Hello</span>
</body>
</html>

But...the question doesn't call for jQuery. – tymeJV Jul 19 '13 at 13:05 — tymeJV, Jul 19 '13 at 13:05

score 0 · Answer 5 · answered Jul 19 '13 at 13:06

0

Your fiddle works fine, on the left-hand side, second drop-down, change to No Wrap - In <head>, now your content is there and script is loaded. Try it again: http://jsfiddle.net/HdvGD/4/

answered Jul 19 '13 at 13:06

tymeJV

99,730
13
150
152

Javascript: onclick function to get elements

5 Answers5