why does

Question

Here is my code, I would like to know why does display() executes but show() doesn't. There must be a logic behind it right. Please enlighten me.

<html>
    <head>

    </head>
    <body>
        <button id="b1" onclick="show()">Show</button>
        <p id="p1"></p>
        <p id="p2"></p>
    <body>
    <script>
        function show()
        {
            document.getElementById("p1").innerHTML="Hello";
        }

        document.getElementById("b1").onclick=display;
        function display(){
            document.getElementById("p2").innerHTML="World";    
        }
    </script>
</html>

as a *note*: inline js should be avoided - much better to use an eventHandler — treyBake, Jan 07 '19 at 10:48
it works!! remove the `document.getElementById("b1").onclick=display;` and see the difference. you can't show two output on single event. — Sumit Sahay, Jan 07 '19 at 10:51
I assume it's a typo, but your second `` tag should be `` and should be below the script. — TiiJ7, Jan 07 '19 at 11:03
Not a complete duplicate, but this issue is also addressed in [addEventListener vs onclick](https://stackoverflow.com/questions/6348494/addeventlistener-vs-onclick) and the accepted answer there goes into a great level of detail with lots of background information and historical facts. — GolezTrol, Jan 07 '19 at 11:33

GolezTrol · Answer 1 · 2019-01-07T11:34:52.830

2

This would work if you have only one of the two. The problem is that the second bit of code will overwrite the onclick handler, which is why the first one is never called.

You could use addEventListener, which will not overwrite the existing listener(s), but add an extra one. That way, both will fire, although I think formally you can't be guaranteed of the order. In this particular scenario that shouldn't matter though.

function show()
{
    document.getElementById("p1").innerHTML="Hello";
}

function display()
{
    document.getElementById("p2").innerHTML="World";    
}

document.getElementById("b1").addEventListener('click', display);

<button id="b1" onclick="show()">Show</button>
<p id="p1"></p>
<p id="p2"></p>

As mentioned in the comments, it's better to avoid inline JavaScript completely and get rid of the onclick attribute from your markup. But in some cases (maybe when you're stuck on WordPress or some other framework that relies on those inlined event handlers), you can't get rid of those. In that case, you can still use addEventListener as demonstrated to add your own event handler without interfering with the existing functionality.

edited Jan 07 '19 at 11:34

answered Jan 07 '19 at 10:49

GolezTrol

114,394
18
182
210

So can you please tell me why are there these two different ways of handling the event? – Viren Pawar Jan 07 '19 at 10:57
There must be some logic behind providing 2 variants handling event right! – Viren Pawar Jan 07 '19 at 11:11
In general it's because one existed before the other. The multi-cast events were introduced later, and I guess the other is kept for compatibility. Why both are used in _your_ code, I cannot tell. It's your code, right? :) – GolezTrol Jan 07 '19 at 11:28
See also [addEventListener vs onclick](https://stackoverflow.com/questions/6348494/addeventlistener-vs-onclick). The accepted answer there goes into a nice level of detail. – GolezTrol Jan 07 '19 at 11:29
It's my code that's right, but I was just checking practically why two ways and what will be the output on execution of both together. – Viren Pawar Jan 08 '19 at 08:16
For historical reasons. JavaScript hasn't always been as elaborate as it is now, and things that were common in the past are now concidered bad practise. addEventListener is more flexible, but was only introduced later. Nowadays every major browser supports it, assuming you don't need support for IE8 anymore, so it's safe to use `addEventListener`. But the other way around not. If modern browsers would drop support for the `onclick` attribute, it would break many existing websites that still rely on it. – GolezTrol Jan 08 '19 at 08:32

score 1 · Answer 2 · answered Jan 07 '19 at 10:50

For the same reason that:

document.querySelector("P").innerHTML = "Replaced";

<p>Original</p>

… shows "Replaced".

You overwrote the onclick function with a new one, completely replacing the old one.

Avoid onclick attributes and properties. Use addEventListener instead.

function show() {
  document.getElementById("p1").innerHTML = "Hello";
}

function display() {
  document.getElementById("p2").innerHTML = "World";
}

const b1 = document.getElementById("b1");
b1.addEventListener("click", show);
b1.addEventListener("click", display);

<button id="b1">Show</button>
<p id="p1"></p>
<p id="p2"></p>

Biswadev · Answer 3 · 2019-01-07T11:10:39.660

onclick property of the EventHandler is for processing click events on a given element.

for onclick event ,you have assigned new function object through

 document.getElementById("b1").onclick=display;

Only one onclick handler can be assigned to an object at a time

<body>
    <button id="b1" onclick="show()">Show</button>
    <p id="p1"></p>
    <p id="p2"></p>
<body>
<script>
    function show()
    {
        document.getElementById("p1").innerHTML="Hello";
    }

    document.getElementById("b1").onclick=display;
    function display(){
        document.getElementById("p2").innerHTML="World";    
    }
</script>

score -1 · Answer 4 · answered Jan 07 '19 at 10:50

-1

You can only bind onclick with one method either display or show

answered Jan 07 '19 at 10:50

Wasif Khalil

2,217
9
33
58

why does do not fire while documentgetElemebtById("").onclick=funtion does in javascript?

4 Answers4

why does