function document.getElementsByTagName does not work

2

I have the following code in html and it is supposed that I should click on the first paragraph to execute the alert of the javascript file but nothing happens with any browser, I have seen that many people have this problem, why is it?

the html code is

<!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>

the js file is

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

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

window.onload=ejecuta;
    
asked by RicardoBarros 04.11.2017 в 04:10
source

4 answers

2

your code is almost correct, but it does not work because you should not put it that way onClick , since this way it will not work, instead you should write it like this onclick , in lowercase, javascript is sensitive to lowercase and capital letters, I'll give you an example:

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>

You can also use the addEventListener method to 'add' a function to an event, like this:

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>

With regard to missing the parentheses, I commented that the parentheses make your function run, that is, if you do:

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

You are executing the function saludar and assigning the return of saludar as function onclick , but your function returns nothing, so the assignment would be something like .onclick = undefined; , but you can also return a function so that is assigned to onclick , I leave an example:

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>

I hope and it works, greetings.

    
answered by 04.11.2017 в 05:19
0

My recommendation is as follows. 1- Change onClick to onclick all in lowercase, although it is preferable that you do it with the function addEventListener. 2- Make sure that when you call the getElements function ... the returned value is not null, which is the return value when there are no matches.

    
answered by 04.11.2017 в 06:26
0

Check your code and correct it a bit:

Code :

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

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

window.onload=ejecuta();

Greetings !!

    
answered by 04.11.2017 в 04:18
-1

It's because those elements do not have the 'click' event and a function linked to that event.

Then to solve you can apply to all the elements with tag p by going through and adding to each element so that it listens to the function you want.

your code would be like this:

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>

Responding to the observation of @ftorres

  

those elements if they have the 'click' property, only that you have it   to assign a function using the syntax 'element.onclick =   function; ', and not' element.onClick = function;

In the following code I will show that the element is not born with the 'click' event code:

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

console.log(parrafo.getAttribute('click'));
<p id="parrafo">soy parrafo</p>
    
answered by 04.11.2017 в 04:59