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.
This question is related to
javascript
jquery
html
getelementbyid
Make sure your code is in DOM Ready as pointed by rocket-hazmat
$('#RootNode').click(function(){
//do something
});
document.getElementById("RootNode").onclick = function(){//do something}
$(document).on("click", "#RootNode", function(){
//do something
});
Wrap Code in Dom Ready
$(document).ready(function(){
$('#RootNode').click(function(){
//do something
});
});
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*/});
});
Source: Stackoverflow.com