can I use document.getElementById(someid).onclick for tag a

Question

Hi All, I am trying to call a javascript function onclick. I have written something like this

<script type="text/javascript">
    function readPage(){
        alert("Hello");
    }

    document.getElementById('read').onclick=readPage;
</script>

<a id="read" href="">read</a> 

I am trying to call readPage function but its not working?if I write onclick inside tag it works but the way I have written above is not working. why?

Answer 1

You would first have to disable anchor's default direction protocol (i.e., not let a go to href)

1. Make href="#" on anchor.
2. Check the event.preventDefault() function example here.

Answer 2

You should have:

<script type="text/javascript">
    function readPage(){
        alert("Hello");
    }

    document.getElementById('read').onclick=readPage;
</script>

<a id="read" href="#">read</a> 

Answer 3

There is nothing wrong about how you do it, but when. You can not access the DOM (like running getElementById()) before it has loaded. The easiest thing to do is to run you code inside window.onload like this:

window.onload = function() {
     document.getElementById('read').onclick=readPage;
}

Answer 4

It will work with an empty href attribute (then the current URL of the page will be used), but you have to use, as already mentioned, window.onload to attach the click handler, or you have to move the script block after the a element.

Otherwise getElementById cannot find the element because it does not yet exist in the DOM tree.

<a id="read" href="">read</a> 

<script type="text/javascript">
    function readPage(){
        alert("Hello");
        return false;
    }

    document.getElementById('read').onclick=readPage;
</script>

​ As already mentioned, you use e.g. return false; to make the browser not follow the URL. You even need this if you change the URL to href="#" because otherwise the browser will scroll the page to the top.

Test it yourself: http://jsfiddle.net/Nj4Dh/1/

---

Read more about the traditional event registration model.

Answer 5

There are two ways to do it really (Without any browser specific functions). One is

<script type="text/javascript">

    function stopDefault(e) //cross browser function for stopping default actionw
    {
        if (e && e.preventDefault)
        {
            e.preventDefault();
        }
        else
        {
            window.event.returnValue = true;
        }
        return false;
    }

    function readPage(event){
        alert("Hello");

         return stopDefault(event);//prevent default action
    }



    window.onload = function(event){

         document.getElementById('read').onclick=readPage;


    }
</script>

<a id="read" href="#">read</a> 

Or:

<script type="text/javascript">
    function stopDefault(e)
    {
        if (e && e.preventDefault)
        {
            e.preventDefault();
        }
        else
        {
            window.event.returnValue = true;
        }
        return false;
    }

    function readPage(event){
        alert("Hello");

         return stopDefault(event);//prevent default action
    }

</script>
<a id="read" href="#" onclick="readPage(event)">read</a> 

I've used the stopDefault function sd You need to stop the default action of a link, otherwise it will try to go to the url thats in the href.