0

Buenas tardes agradezco de ante mano a quien me pueda ayudar, requiero llamar una función desde Javascript que contiene un mensaje, cada vez que oprima el botón del formulario. Pero me encontré con dos problemas 1. el mensaje aparece al cargar la pagina 2. el botón no esta llamando la función. y no entiendo porque este comportamiento me gustaría que me explicaran mas detalladamente que es lo que me esta faltando y como hacer que el código funcione.

function mensaje(){
alert('hola mundo');
}
document.getElementById('Validarbtn').onclick=mensaje();
<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8"><!--Etiqueta para uso del caracter ñ-->
	<script type="text/javascript" src="js/test.js"></script>
	<title>prueba</title>
</head>
<body>
	<form action="" method="post" id="registro-frm" name="registro_frm">

		<label>
			Nombre
		<input type="text" name="nombre_txt" id="nombre"/>
		</label>
	<div>
	<button type="button" name="Validar_btn" id="Validarbtn" >Validar</button>

	</div>
	</form>
</body>
</html>

2
  • Por favor considera editar y redactar un título un tanto más objetivo, pues colocar x lenguaje para principiantes no dice nada del problema que tienes
    – user128299
    Commented el 11 ene. 2020 a las 21:17
  • lo tendré en cuenta, gracias!! Commented el 11 ene. 2020 a las 21:43

3 respuestas 3

3

La mejor forma de hacerlo con javascript puro es asociando al botón un escuchador de evento que tenga un callback que devuelva el mensaje. Para eso se usa un método llamado addEventListener(). El primer parámetro es el tipo de evento (en este caso el click) y el segundo es el callback (una función que se pasa como parámetro y retorna algo, en este caso el mensaje):

let button = document.getElementById('miboton');

button.addEventListener('click', function(){
  alert("Hola mundo");
})
<button id='miboton'>Mensaje</button>

Este callback se va a ejecutar después que se escuche el evento click (cuando acciones el botón). También sirve para otros eventos como onmouseover, onkeydown, onload. Eventos que puedes ver aquí: https://www.w3schools.com/js/js_events.asp


Si no entendiste mucho el vocabulario espero que esto pueda acompañar a mi respuesta:

Functions: https://www.w3schools.com/js/js_functions.asp

Event Listener: https://www.w3schools.com/jsref/met_element_addeventlistener.asp

Callbacks function: https://developer.mozilla.org/es/docs/Glossary/Callback_function

2
  • 1
    Gracias por tu respuesta, @Diesan Romero diste con la solución!! Commented el 11 ene. 2020 a las 22:01
  • De nada, fue un placer. Commented el 12 ene. 2020 a las 0:40
2

Estas invocando a la función, el valor que le asignas a la propiedad onclick al final es el retorno de la función al invocarla con la sintaxis mensaje() y no el valor (la referencia de la función en si).

function mensaje(){
  alert('hola mundo');
}
document.getElementById('Validarbtn').onclick=mensaje;
1
  • Tampoco funciona david :( Commented el 11 ene. 2020 a las 21:57
0

estas haciendo mal la línea en donde atrapas el elemento.

// así debería ser

let variable = document.getElementById('Validarbtn');

// sobre ese llamar el método add event

variable.addEventListener('click', mensaje) ;

function mensaje(){
   alert('hola mundo');
}
2
  • 1
    ricardo buenas tardes lo probe pero no funciona no se que me falta, mira... Commented el 11 ene. 2020 a las 21:52
  • let llamada = document.getElementById('Validarbtn'); llamada.addEventListener('click',mensaje()); function mensaje(){ alert('hola mundo'); } Commented el 11 ene. 2020 a las 21:53

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.