The functionality of .map() in Javascript is non-existent

Question

The functionality of .map() in Javascript is non-existent

I am completely new to this community (and JavaScript is also new for me), so I apologize in advance for asking some very basic questions. I have an HTML page with various images, all of which share a common class. After using getElementsByClassName, I obtain an array. My goal is to attach an event listener to each cell in the array by utilizing the .map() function.

Here is my current attempt:

window.onload = function(){
var allImgs = document.getElementsByClassName("pft");

var newImgs = allImgs.map(
        function(arrayCell){
            return arrayCell.addEventListener("mouseover, functionName");
        }
    );
};

Unfortunately, I keep receiving the error "allImgs.map is not a function" even when I modify the inner function to remove the event listener.

In another version of this code, I simply loop through the array cells within window.onload and add the event listener to each one, which works perfectly fine. So, why isn't the .map() function working here? Is it possible that it cannot be used within window.onload?

javascript arrays

Answer 1

Answer №1

getElementsByClassName() does not return an Array, but rather an HTMLCollection. To work with it as an array in JavaScript, you will need to convert it using one of the following methods:

convertedArr = Array.prototype.slice.call(originalArr);

// alternatively
convertedArr = [].slice.call(originalArr);

// or (credit to @john-doe)
convertedArr = Array.from(originalArr);

// or (credit to @jane-smith)
convertedArr = [...originalArr]

Answer 2

getElementsByClassName() does not return an Array, but rather an HTMLCollection. To work with it as an array in JavaScript, you will need to convert it using one of the following methods:

convertedArr = Array.prototype.slice.call(originalArr);

// alternatively
convertedArr = [].slice.call(originalArr);

// or (credit to @john-doe)
convertedArr = Array.from(originalArr);

// or (credit to @jane-smith)
convertedArr = [...originalArr]

Answer 3

Answer №2

Whenever I use getElementsByClassName, it returns an array-like object.

No, that's not exactly correct.

It actually returns a live HTMLCollection, which behaves like an array but is not technically an array.

Despite this distinction, you can still utilize methods like map on the HTMLCollection as if it were a real array.

    var text_content = [].map.call(
      document.getElementsByClassName("sdf"),
      function (currentValue, index, collection) {
        return currentValue.innerHTML;
      }
    );
    console.log(text_content);

  <p class="sdf">foo</p>
  <p class="sdf"></p>
  <p class="sdf">bar</p>
  <p class="sdf"></p>
  <p class="sdf"></p>

Answer 4

Whenever I use getElementsByClassName, it returns an array-like object.

No, that's not exactly correct.

It actually returns a live HTMLCollection, which behaves like an array but is not technically an array.

Despite this distinction, you can still utilize methods like map on the HTMLCollection as if it were a real array.

    var text_content = [].map.call(
      document.getElementsByClassName("sdf"),
      function (currentValue, index, collection) {
        return currentValue.innerHTML;
      }
    );
    console.log(text_content);

  <p class="sdf">foo</p>
  <p class="sdf"></p>
  <p class="sdf">bar</p>
  <p class="sdf"></p>
  <p class="sdf"></p>

Answer 5

Answer №3

If you prefer, you can utilize the map method like this:

[].map.call(allImages, function() { ... });

Although, in this case, it is recommended to use Array.prototype.forEach for better efficiency.

Answer 6

If you prefer, you can utilize the map method like this:

[].map.call(allImages, function() { ... });

Although, in this case, it is recommended to use Array.prototype.forEach for better efficiency.

Answer 7

Answer №4

Easy way to shorten the syntax:

[...document.getElementsByClassName("pft")].map(cellArray => cellArray.addEventListener("mouseover", "functionName"))

Answer 8

Easy way to shorten the syntax:

[...document.getElementsByClassName("pft")].map(cellArray => cellArray.addEventListener("mouseover", "functionName"))

Answer 9

Answer №5

const elements = document.querySelectorAll('.demo');
for(let i = 0; i < elements.length; i++) {
  let element = elements[i];
  element.onmouseleave = function() {
    this.style.color = "#000";
  }
  element.onmouseover = function() {
    this.style.color = 'red';
  }

}

.demo {
  cursor:pointer;
}

<div>
  <p class="demo">paragraph one</p>
  <p class="demo">paragraph two</p>
  <p class="demo">paragraph three</p>
  <p class="demo">paragraph four</p>
  <p class="demo">paragraph five</p>
  <p class="demo">paragraph six</p>
</div>

Answer 10

const elements = document.querySelectorAll('.demo');
for(let i = 0; i < elements.length; i++) {
  let element = elements[i];
  element.onmouseleave = function() {
    this.style.color = "#000";
  }
  element.onmouseover = function() {
    this.style.color = 'red';
  }

}

.demo {
  cursor:pointer;
}

<div>
  <p class="demo">paragraph one</p>
  <p class="demo">paragraph two</p>
  <p class="demo">paragraph three</p>
  <p class="demo">paragraph four</p>
  <p class="demo">paragraph five</p>
  <p class="demo">paragraph six</p>
</div>

The functionality of .map() in Javascript is non-existent

Answer №1

Answer №2

Answer №3

Answer №4

Answer №5

Similar questions

Organizing files and folders based on their size within the Document Directory in a Swift iOS application

React Native - Invariant Violation: Objects cannot be used as a React Child (Utilizing Node.js for the backend)

Utilizing tag keys for inserting text and adjusting text sizes within a Web application

Implementing the insertion of data using array pointers

Issue with Bing Maps Infobox mouseout event: Problem arises when attempting to change the htmlContent asynchronously

What exactly is the purpose of utilizing node js and can someone explain to me what constitutes a

Making a single variable object as opposed to using multiple variables

Discover the process for breaking down JSON data into separate stages using the Express API

Express.js's Handlebars failing to render elements from an array

Does anyone know if it's feasible to return a value from PHP to an HTML form without relying on JavaScript?

During the build process, Next.js encounters difficulty loading dynamic pages

Tips on enclosing <li> elements within <ul> tags

Issue with sizing and panning when using a combination of Three.js and CSS3Renderer

Having difficulties transmitting numerical values through res.send() in express with node

The object literal's property 'children' is assumed to have a type of 'any[]' by default

Click the link to find the JSON node that corresponds to the onclick event

What is the best way to showcase the content from multiple uploaded files?

Saving the author of a message from one function and transferring it to another

What is causing the element to disappear in this basic Angular Material Sidenav component when using css border-radius? Check out the demo to see the issue in action

What strategies can I implement to prevent the JavaScript CallStack from becoming overloaded?