1

tengo el siguiente codigo en html y se supone que deberia al dar click en el primer parrafo ejecutar el alert del archivo javascript pero no pasa nada con ningun navegador, he visto que mucha gente tiene este problema, ¿a que se debe?

el codigo html es

<!DOCTYPE html>
<html>
<head>
    <title>DOCUMENTO SIN TÍTULO</title>

    <script src="10Javascript-introduccion.js"></script>

</head>

<body>
    <p>ejemplo 2do parrafo</p>
    <p>ejemplo 3 parrafo</p>
    <p>ejemplo 4 parrafo</p>
</body>
</html>

el archivo js es

function ejecuta(){
    document.getElementsByTagName("p")[0].onClick=saludo; 
}

function saludo(){
    alert("Hola");
}

window.onload=ejecuta;

4 respuestas 4

1

tu código es casi correcto, pero no funciona porque no debes de ponerlo así onClick, ya que así no funcionara, en su lugar debes de escribirlo así onclick, en minúsculas, javascript es sensible a las minúsculas y mayúsculas, te dejo un ejemplo:

function iniciar(){
    document.getElementsByTagName('p')[0].onclick = saludar;
}

function saludar(){
    alert('Hola!!');
}

//Ejecutamos 'iniciar()', como si fuera window.onload
iniciar();
<p>ejemplo 1er parrafo</p>
<p>ejemplo 3er parrafo</p>
<p>ejemplo 4to parrafo</p>

También puedes usar el metodo addEventListener para 'agregar' una función a un evento, así:

function iniciar(){
    document.getElementsByTagName('p')[0].addEventListener('click', saludar, false);
}

function saludar(){
    alert('Hola!!');
}

iniciar();
<p>ejemplo 1er parrafo</p>
<p>ejemplo 3er parrafo</p>
<p>ejemplo 4to parrafo</p>

Con respecto a que te faltaron los paréntesis, te comento que los paréntesis hacen que tu función se ejecute, es decir que si haces:

document.getElementsByTagName('p')[0].onclick = saludar();

Estas ejecutando la función saludar y asignando el retorno de saludar como función onclick, pero tu función no retorna nada, así que la asignación sería algo como .onclick = undefined;, pero también puedes retornar una función para que le sea asignada a onclick, te dejo un ejemplo:

function iniciar(){
    document.getElementsByTagName('p')[0].onclick = saludar();
}

function saludar(){
    //Retornamos la función '_saludar'
    return _saludar;
}

function _saludar(){
    alert('Hola!!');
}

iniciar();
<p>ejemplo 1er parrafo</p>
<p>ejemplo 3er parrafo</p>
<p>ejemplo 4to parrafo</p>

Espero y te funcione, saludos.

0

Mi recomendación es la siguiente. 1- Cambia onClick por onclick todo en minúsculas, aunque es preferible que lo hagas con la función addEventListener. 2- Asegúrate de que cuando llames a la función getElements... el valor devuelto no sea null, que es el valor devuelto cuando no hay coincidencias.

0

Revise tu código y lo corregí un poco:

Código:

function ejecuta(){
    document.getElementsByTagName("p")[0].addEventListener("click", saludo);
}

function saludo(){
    alert("Hola");
}

window.onload=ejecuta();

Saludos!!

2
  • 1
    Amigo le puse el parentesis al ejecutarlo como me dijiste y ahora funciona aparece el alert con la penultima linea de codigo (antes) pero se ejecuta sin siquiera que le de click al tag p siendo que le puse "onclick" , con la 2da (Despues) no funciona, copié tu linea de codigo de ese addeventlistener y no hace nada al darle click... yo estaba siguiendo un tutorial de youtube y la hacen con la primera (antes) y funciona bien al dar click recien ahi se ejecuta el alert de la otra funcion, tampoco en el tutorial le ponian los () a las funciones :o Commented el 4 nov. 2017 a las 3:40
  • Si, a mi me pasaba igual pero lo corregí y edite mi respuesta porque creo que estaba algo confusa, saludos! espero lo hayas solucionado Commented el 8 nov. 2017 a las 22:36
-1

Se debe a que esos elementos no tienen el evento 'click ' y una funcion enlazada a dicho evento.

Entonces para solucionar puedes aplicar a todos los elementos con tag p recorriendo y agregando a cada elemento para que escuche la funcion que tu desees.

tu codigo quedaria asi:

window.onload = function() {
  ejecuta();
}

function ejecuta() {

  var arrayTags = document.getElementsByTagName("p");

  Object.values(arrayTags).forEach(function(current) {
    current.addEventListener('click', saludo);
  });

}

function saludo() {
  console.log("Hola");
}
<p>ejemplo 2do parrafo</p>
<p>ejemplo 3 parrafo</p>
<p>ejemplo 4 parrafo</p>

Respondiendo a la observacion de @ftorres

esos elementos si tienen la propiedad 'click', solo que se le tiene que asignar una función usando la sintaxis 'elemento.onclick = funcion;', y no 'elemento.onClick = function;

En el codigo siguiente demostrare que el elemento no nace con el evento 'click' codigo:

var parrafo=document.getElementById('parrafo');

console.log(parrafo.getAttribute('click'));
<p id="parrafo">soy parrafo</p>

7
  • Hola @x-rw, solo como un comentario, esos elementos si tienen la propiedad 'click', solo que se le tiene que asignar una función usando la sintaxis 'elemento.onclick = funcion;', y no 'elemento.onClick = function;'.
    – ftorres
    Commented el 4 nov. 2017 a las 4:30
  • @ftorres el mismo nombre de la funcion lo dice, addEventListener(agregar EventoEscuchador), tu observacion creo que es incorrecta Commented el 4 nov. 2017 a las 4:42
  • lo incorrecto es decir o escribir que los elementos HTML de tipo párrafo no tienen o se les puede asignar un 'escucha' para el evento 'click', te dejo un enlace de referencia con un poco de información sobre dicho elemento: developer.mozilla.org/es/docs/Web/HTML/Elemento/p
    – ftorres
    Commented el 4 nov. 2017 a las 4:54
  • @ftorres actualice mi respuesta respondiendote con una demostracion Commented el 4 nov. 2017 a las 5:05
  • no quiero comenzar una discusión, solo pienso que tu respuesta esta algo alejada del 'error' que tiene el código original.
    – ftorres
    Commented el 4 nov. 2017 a las 5:12

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.