Why is my eventListener (Click) executed when reloading the page and not when clicking?

Question

Why is my eventListener (Click) executed when reloading the page and not when clicking?

Navigation

#1 by (1 votes)
#2 by (1 votes)
#3 by (0 votes)

0

This should be something simple but I am learning from this ... The issue is that it executes the whole function when reloading the page and not when clicking on the button

document.getElementById("btn1").addEventListener("click", alert("Aqui hay algo nuevo"),false);

function clickeando(){
	alert("Aqui hay algo!");
}

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Practicas Javascript</title>
	<link rel="stylesheet" href="main.css">

</head>
<body>
	<p class="clase1">
		Lorem ipsum dolor sit amet, consectetur adipisicing elit. Sequi voluptates amet blanditiis, quis asperiores voluptas fuga libero obcaecati nostrum odit labore commodi, delectus natus vel nam fugit repellat quae autem!

	</p>	
	<button id="btn1">Clickeando Ando!</button>


<script src="main.js"></script>
</body>
</html>

javascript html5

asked by Eleazar Ortega 29.10.2017 в 01:50

source

3 answers

Send variables by $ _POST in wordpress How to print an array in Java using the for cycle?

score 1 · Answer 1

At no time do you tell your button to execute the function by clicking when the on.click event of it happens.

Your code may look like this, remembering that it is always important to enclose the code that pertains to the elements of the DOM within DOMContentLoaded .

document.addEventListener("DOMContentLoaded", function(event) {

  var btn = document.getElementById("btn1");
  btn.onclick = function() {
    alert('Aquí hay algo')
  };

});

<p class="clase1">
  Lorem ipsum dolor sit amet, consectetur adipisicing elit. Sequi voluptates amet blanditiis, quis asperiores voluptas fuga libero obcaecati nostrum odit labore commodi, delectus natus vel nam fugit repellat quae autem!

</p>
<button id="btn1">Clickeando Ando!</button>

score 1 · Answer 2

Another good option would be to place this part at the beginning of your code:

window.onload = function() {
	var mb = document.getElementById("btnUno");
	mb.addEventListener("click", clickSomethingMatch);

Notice that I have changed the name of the id. I do not recommend that you use numbers in variables since it can give you conflict, use the cameltoe.

score 0 · Answer 3

You are running the alert directly instead of passing the reference to a function.

This:

document.getElementById("btn1").addEventListener("click", alert("Aqui hay algo nuevo"),false);

It's the same as this:

var resultadoAlert = alert("Aqui hay algo nuevo");
document.getElementById("btn1").addEventListener("click", resultadoAlert ,false);

What causes it to be sent shows the alert and the result of the alert() function that is undefined is sent as parameter.

Send the reference of a function to achieve what you want. Here are the 2 ways to do it:

// enviandole la referencia de la funcion clickeando
document.getElementById("btn1").addEventListener("click", clickeando,false);

// enviando la referencia de una funcion anomina al evento.
document.getElementById("btn2").addEventListener("click", function(){
  alert("Clickeando algo nuevo!");
},false);

function clickeando(){
	alert("Aqui hay algo!");
}

	<p class="clase1">
		Lorem ipsum dolor sit amet, consectetur adipisicing elit. Sequi voluptates amet blanditiis, quis asperiores voluptas fuga libero obcaecati nostrum odit labore commodi, delectus natus vel nam fugit repellat quae autem!

	</p>	
	<button id="btn1">Clickeando algo!</button>
  	<button id="btn2">Clickeando algo nuevo!</button>