why does <button onclick="" > do not fire while documentgetElemebtById("").onclick=funtion does in javascript?
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>
4 answers
solution1
2 2019-01-07 10:49:42
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.
solution2
1 2019-01-07 10:50:24
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>
solution3
0 2019-01-07 10:58:09
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>
solution4
-1 2019-01-07 10:50:37
您只能使用 display 或 show 一种方法绑定 onclick
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.