Onclick function based on element id

Question

I'm working on a site with a visualization of inheritance relation.

I try to link each nodebox with specific URLs. The html of Element looks like this:

<g class="node" id="RootNode" transform="translate(0,453.125)">

I used

$('#RootNode').click(function(){//do something}

and also

document.getElementById("RootNode").onclick(){//do something}

Neither of them can find the element, nor setup the onclick function.

Have I misunderstood anything? Any information will be helpful. Thanks.

Answer 1

Make sure your code is in DOM Ready as pointed by rocket-hazmat

.click()

$('#RootNode').click(function(){
  //do something
});

---

document.getElementById("RootNode").onclick = function(){//do something}

---

.on()

Use event Delegation/

$(document).on("click", "#RootNode", function(){
   //do something
});

---

Try

Wrap Code in Dom Ready

$(document).ready(function(){
    $('#RootNode').click(function(){
     //do something
    });
});

Answer 2

you can try these:

document.getElementById("RootNode").onclick = function(){/*do something*/};

or

$('#RootNode').click(function(){/*do something*/});

or

$(document).on("click", "#RootNode", function(){/*do something*/});

There is a point for the first two method which is, it matters where in your page DOM, you should put them, the whole DOM should be loaded, to be able to find the, which is usually it gets solved if you wrap them in a window.onload or DOMReady event, like:

//in Vanilla JavaScript
window.addEventListener("load", function(){
     document.getElementById("RootNode").onclick = function(){/*do something*/};
});
//for jQuery
$(document).ready(function(){
    $('#RootNode').click(function(){/*do something*/});
});