Uncertainty surrounding the implementation of onclick function

Question

Uncertainty surrounding the implementation of onclick function

Just starting out with JavaScript and hoping for some help understanding this.

1) Why isn't this code working as expected?

var allSpans = document.getElementsByTagName('span');
allSpans.onclick = function() {
 alert('hoo'); 
};

2) And what if I store all the innerHTML values from spans in an array and try this:

var allSpans = document.getElementsByTagName('span');
var arrayNumbers = [];

for (var i = 0; i < allSpans.length; i++) {
  var operator = allSpans[i].innerHTML; 
}
arrayNumbers.onclick = function() {
 alert('hoo'); 
};

javascript

Answer 1

Answer №1

click is a characteristic of HTMLElementNode elements. The method querySelectorAll returns a collection called NodeList. Setting a property on a NodeList does not automatically apply it to each item in that collection.
It's the same concept, just with an Array instead of a NodeList.

Answer 2

click is a characteristic of HTMLElementNode elements. The method querySelectorAll returns a collection called NodeList. Setting a property on a NodeList does not automatically apply it to each item in that collection.
It's the same concept, just with an Array instead of a NodeList.

Answer 3

Answer №2

It is necessary to loop through the list that is returned

let spans = document.getElementsByTagName('span');

for ( let index = 0; index < spans.length; index += 1 ) {
    spans[index].onclick = function (event) {
         alert('hoo'); 
    };
}

Answer 4

It is necessary to loop through the list that is returned

let spans = document.getElementsByTagName('span');

for ( let index = 0; index < spans.length; index += 1 ) {
    spans[index].onclick = function (event) {
         alert('hoo'); 
    };
}

Answer 5

Answer №3

In response to your initial inquiry, you must incorporate this code within each individual node rather than relying solely on the nodeList generated by calling document.getElementsByTagName. The solution you are seeking is as follows:

for(var i = 0; i < allSpans.length; i++){
  allSpans[i].onClick = function(){
    alert('hoo');
  };
}

A similar issue arises in the second query, where it seems that no elements are actually being added to the arrayNumbers array. Consequently, even if you were to iterate through it, the expected events wouldn't trigger upon clicking.

Answer 6

In response to your initial inquiry, you must incorporate this code within each individual node rather than relying solely on the nodeList generated by calling document.getElementsByTagName. The solution you are seeking is as follows:

for(var i = 0; i < allSpans.length; i++){
  allSpans[i].onClick = function(){
    alert('hoo');
  };
}

A similar issue arises in the second query, where it seems that no elements are actually being added to the arrayNumbers array. Consequently, even if you were to iterate through it, the expected events wouldn't trigger upon clicking.

Uncertainty surrounding the implementation of onclick function

Answer №1

Answer №2

Answer №3

Similar questions

Struggling with displaying values from an array using getJSON

Unable to modify the logo images in React

The share-modal.js file is throwing an error because it is unable to read properties of null, particularly the 'addEventListener' property, at

Navigate to the appropriate Angular route using HTML5 mode in Rails

Unable to retrieve the latest state changes in React

Vue 3 project experiencing issue with Bootstrap 5 tabs failing to update upon tab click

Working with AngularJS: How to sort ng-options when dealing with an object

What could be causing the fourth tab to not show any data while the first three tabs are functioning as expected?

Stopping React component click event from bubbling up to document

Extracting information from a string with JSON in Javascript

Please add a new row following the date that falls on a Sunday using Google Apps Script

Error: Unable to iterate over the elements of `this.state` as it is

When state is updated, the component is re-rendered multiple times

Interacting with Rails controllers through AJAX to trigger a JavaScript function

Transforming a base64 encoded string into a byte array

Ways to activate onChange multiple times for a single item within material ui's autocomplete feature

Using Typescript to define unions with multiple callback types

What is the best way to dynamically add the 'required' attribute to an input field?

Determine the position and quantity of elements in jQuery by comparing their IDs with the current page or element

In certain instances, a modal popup may intermittently fail to hide after the page has finished loading, an issue observed