addEventListener() not working more than once with a button in JavaScript?

JavascriptWeb DevelopmentObject Oriented Programming

To make addEventListener() repeatedly work on button clicks, use the following code −

Example

 Live Demo

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initialscale=
1.0">
<title>Document</title>
<link rel="stylesheet" href="//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">
<script src="https://code.jquery.com/jquery-1.12.4.js"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/fontawesome/4.7.0/css/font-awesome.min.css">
</head>
<body>
<button id="pressButtonDemo">Click Me</button>
<script>
   var eventValue = function (event) {
      document.body.appendChild(document.createElement('div'))
      .textContent = event.type;
   }
   var pressed = document.querySelector("#pressButtonDemo");
   pressed.addEventListener("click", eventValue);
</script>
</body>
</html>

To run the above program, save the file name “anyName.html(index.html)” and right click on the file. Select the option “Open with Live Server” in VS Code editor.

Output

This will produce the following output −

When you click the button “Click Me” then you will get the following output. This will produce the following output −

Now, click the button one more time. This will produce the following output −


raja
Published on 01-Sep-2020 14:34:05
Advertisements