Using a JavaScript onclick function to retrieve specific elements within the document

Question

Using a JavaScript onclick function to retrieve specific elements within the document

I'm attempting to extract the elements from the source that was clicked on, but for some reason it's not functioning correctly.

Check out my JSFIDDLE

Here's the HTML:

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

And here's the CSS:

.populate {
    cursor: pointer;
}

Followed by the JavaScript:

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

I'm seeing an error in the console saying that the populate function is not defined.

If anyone has any suggestions or advice, I would greatly appreciate it!

javascript html css object

Answer 1

Answer №1

The issue lies in the sequence of the javascript code and the placement of the span tag.

Make sure to include the javascript function before the span 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>

It is important to define functions before invoking them. Check out the example on http://jsfiddle.net/HdvGD/7/

Answer 2

The issue lies in the sequence of the javascript code and the placement of the span tag.

Make sure to include the javascript function before the span 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>

It is important to define functions before invoking them. Check out the example on http://jsfiddle.net/HdvGD/7/

Answer 3

Answer №2

Your code executed successfully in the fiddle. The reason you were unable to get it working is because you wrapped it in onload() instead of using No wrap in Head (located at the top left corner of the fiddle).

View your fiddle1 here

If you prefer using onload(), you can assign it as a variable like this:

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

Feel free to check out another demo at fiddle2

For more insights, refer to this helpful answer that explains the difference

Update:

Apologies for mentioning the deprecated method (I have removed it). The event object "event" is not passed as a parameter. Here is a simpler approach - pass the event from onclick like this:

 onclick="populate(event);"

Then you can access it easily like so:

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

View the updated version in Final Fiddle

Answer 4

Your code executed successfully in the fiddle. The reason you were unable to get it working is because you wrapped it in onload() instead of using No wrap in Head (located at the top left corner of the fiddle).

View your fiddle1 here

If you prefer using onload(), you can assign it as a variable like this:

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

Feel free to check out another demo at fiddle2

For more insights, refer to this helpful answer that explains the difference

Update:

Apologies for mentioning the deprecated method (I have removed it). The event object "event" is not passed as a parameter. Here is a simpler approach - pass the event from onclick like this:

 onclick="populate(event);"

Then you can access it easily like so:

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

View the updated version in Final Fiddle

Answer 5

Answer №3

Anchor tags typically have an 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;

   }

Answer 6

Anchor tags typically have an 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;

   }

Answer 7

Answer №4

Try using jQuery to streamline the process

<!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("Now you'll notice the link doesn't redirect 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>

Answer 8

Try using jQuery to streamline the process

<!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("Now you'll notice the link doesn't redirect 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>

Answer 9

Answer №5

The code snippet you provided is functioning properly. To see it in action, navigate to the left-hand side and select the second drop-down menu. Change it to No Wrap - In <head>. Once done, your content should be displayed and the script will be loaded accordingly. Give it another try by visiting this link: http://jsfiddle.net/HdvGD/4/

Answer 10

The code snippet you provided is functioning properly. To see it in action, navigate to the left-hand side and select the second drop-down menu. Change it to No Wrap - In <head>. Once done, your content should be displayed and the script will be loaded accordingly. Give it another try by visiting this link: http://jsfiddle.net/HdvGD/4/

Using a JavaScript onclick function to retrieve specific elements within the document

Answer №1

Answer №2

Answer №3

Answer №4

Answer №5

Similar questions

JavaScript queries in Selenium WebDriver

Managing API calls through Next.js routing

Is it possible to validate a template-driven form without using the model-driven approach?

What are some methods for utilizing the "name" attribute within React components?

Why is My TensorFlow.js Model for Predicting 2 Table Multiples Not Producing Accurate Results?

Converting a variable with a cloned object from jQuery to vanilla JavaScript

Alert: Github Dependabot has flagged Babel as vulnerable to arbitrary code execution when compiling meticulously designed malicious code

The function mysql_fetch_assoc is displaying absolutely nothing (neither null, nor 0, nor an empty string)

There seems to be an issue with the functionality of $apply in angular when used in conjunction with form

Convert time display to a 24-hour format using JavaScript

Guide to dynamically updating the href of an SVG Image in Angular HTML

"Converting an object to a JSON string using URLSearchParams: A step-by

Is there a way to create a Vue.js component that retains the data I have added to it even when transitioning between routes? Currently, whenever I switch routes, the component deletes all the previously

Angular controller utilizing the `focusin` and `focusout` events from jQuery

Issues with Bootstrap 5 navbar-light and font style rendering on Edge browser

Enhance the aesthetics of placeholder text in Semantic UI React using CSS styling

Using Vue.js to utilize a component within another component

What is the process for creating a modal transition?

What is preventing me from adding any style to this specific element?

Scroll-triggered closing of modals in Next Js