Skip welcome & menu and move to editor
Welcome to JS Bin
File
Add library
Share
Login or Register
Blog
Help
Load cached copy from
  • Run with JS
  • Save
  • Share
  • …
 
<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width">
  <title>JS Bin</title>
</head>
<body>
  <h2>Press each button multiple times.<br>Only the 2nd button appends the message more than once. Why?</h2>
  <button>Do Message</button><br>
  <button onclick="doMessage();">Do Message with Inline JavaScript</button><br>
  <button>Do Message with onclick not Inline</button><br>
  
  <a href="https://webtoolsweekly.com/archives/issue-187/" target="_blank"><strong>Answer explained here</strong></a>
​
</body>
</html>
 
body {
  font-family: Arial, sans-serif;
  text-align: center;
  margin-top: 40px;
  line-height: 1.5;
}
​
button {
  display: inline-block;
  margin-bottom: 20px;
  font-size: 18px;
}
​
.blue {
  background: blue;
}
 
var btn = document.querySelector('button'),
    btn3 = document.querySelectorAll('button')[2];
​
function doMessage() {
  document.body.innerHTML += "<br>Message appended to body content.";
}
​
btn.addEventListener('click', function () {
  doMessage();
}, false);
​
// button 2 triggers it with inline onclick
​
btn3.onclick = function () {
  doMessage();
};
Output

You can jump to the latest bin by adding /latest to your URL

Dismiss x
public
Bin info
ImpressiveWebspro
0viewers