CODEWITHSUNDEEP
javascript
Vipul
Vipul

Reputation: 2655

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

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?

Upvotes: 11

Views: 61863

Answers (5)

Bjarne Mogstad
Bjarne Mogstad

Reputation: 1154

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;
};

Upvotes: 14

TmEllis
TmEllis

Reputation:

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.

Upvotes: 0

Felix Kling
Felix Kling

Reputation: 816334

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.

Upvotes: 3

Buhake Sindi
Buhake Sindi

Reputation: 89169

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.

Upvotes: 0

Sarfraz
Sarfraz

Reputation: 382666

You should have:

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

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

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

Upvotes: 0

Related Questions