By George5555ish


2019-04-15 10:57:24 8 Comments

I just picked up JavaScript this month and I'm trying to understand the forEach method along with the data-set idea to print the custom data-set (data-number) for each of the items in the array on the console. So when I click the button, it shows the data-numbers for each of the array items (div-elements) on the console.

It keeps returning the error

"Uncaught TypeError: Cannot read property 'number' of undefined", even when I've assigned number a value.

I notice that when I use just one div element and remove the "Array.from" it prints the data-number for that one element on the console, with no errors.

Could it be a syntax problem, or something I'm missing?

myDiv = Array.from(document.getElementsByClassName('myDiv'));

function myFunction() {

  const number = myDiv.dataset["number"];
  console.log(number);
}
<!DOCTYPE html>
<html>

<head>
  <title> Datasets</title>
</head>

<body>

  <div class="myDiv" data-name="MrMr" data-number="1">
    THIS IS A TEXT
  </div>

  <div class="myDiv" data-number="2">
    another text.
  </div>

  <div class="myDiv" data-number="3">
    another text.
  </div>

  <div class="myDiv" data-number="4">
    another text.
  </div>


  <p id="demo"></p>
  <button onclick="myDiv.forEach(myFunction());">Button</button>


  <script>
  </script>

</body>

</html>

I'm hoping to get a simple array that shows the data-sets I've saved in the div tags (i.e 1, 2, 3, 4).

3 comments

@obscure 2019-04-15 11:10:49

First - the function you want array.forEach() to execute needs an element to process. In your case these are the individual DIV elements. So you're function needs a parameter that 'links' to that particular element. This can be done like:

function myFunction(element);

The attribute you want to query is called data-number, so I'd recommend using it. If you want to get a specific property of a DOM element, you can use element.getAttribute(attribute); Here's a complete example:

    myDiv = Array.from(document.getElementsByClassName('myDiv'));

    function myFunction(element) {

      var theNumber = element.getAttribute("data-number");

      console.log(theNumber);
    }

    myDiv.forEach(myFunction);
<div class="myDiv" data-name="MrMr" data-number="1">
  THIS IS A TEXT
</div>

<div class="myDiv" data-number="2">
  another text.
</div>

<div class="myDiv" data-number="3">
  another text.
</div>

<div class="myDiv" data-number="4">
  another text.
</div>

@caramba 2019-04-15 11:02:16

Why not something like so:

var myFancyButton = document.querySelector('.myFancyButton'); // get the button via querySelector("className")

myFancyButton.addEventListener('click', function() { // add a click event listener to the button
    var myDivs = document.querySelectorAll('.myDiv'); // query for alle elements with a class name = "myDiv"
    myDivs.forEach(function(myDiv) { // now use forEach on all those divs
        const number = myDiv.dataset["number"];
        console.log(number);
    });
});
<div class="myDiv" data-name="MrMr" data-number="1">
    THIS IS A TEXT
</div>

<div class="myDiv" data-number="2">
    another text.
</div>

<div class="myDiv" data-number="3">
    another text.
</div>

<div class="myDiv" data-number="4">
    another text.
</div>


<p id="demo"></p>
<button class="myFancyButton">Button</button>

@Federico klez Culloca 2019-04-15 11:03:06

Yes, but OP is clearly a beginner, so an explanation might be in order.

@caramba 2019-04-15 11:06:31

@FedericoklezCulloca thank you, added some comments in the code

@Jack Bashford 2019-04-15 11:04:34

Couple of things - don't use forEach(), and use map() in your myFunction:

 

myDiv = Array.from(document.getElementsByClassName('myDiv'));

function myFunction(){

    const number = myDiv.map(d => d.dataset["number"]);
    console.log(number);
}
 

<div class="myDiv" data-name="MrMr" data-number="1">
THIS IS A TEXT
</div>

<div class="myDiv" data-number="2">
another text.
</div>

<div class="myDiv" data-number="3">
another text.
</div>

<div class="myDiv" data-number="4">
another text.
</div>


<p id="demo"></p>
<button onclick="myFunction();">Button</button>

Related Questions

Sponsored Content

20 Answered Questions

41 Answered Questions

[SOLVED] How to check empty/undefined/null string in JavaScript?

17 Answered Questions

[SOLVED] How to disable resizable property of textarea?

  • 2011-03-08 16:15:40
  • user549757
  • 1202287 View
  • 2401 Score
  • 17 Answer
  • Tags:   html css

38 Answered Questions

[SOLVED] How do I remove a property from a JavaScript object?

23 Answered Questions

[SOLVED] How to determine if variable is 'undefined' or 'null'?

16 Answered Questions

[SOLVED] How to check for "undefined" in JavaScript?

  • 2010-08-02 17:53:29
  • Christopher
  • 2070015 View
  • 2161 Score
  • 16 Answer
  • Tags:   javascript undefined

60 Answered Questions

[SOLVED] How can I merge properties of two JavaScript objects dynamically?

41 Answered Questions

[SOLVED] Detecting an undefined object property

24 Answered Questions

[SOLVED] How do I check if an object has a property in JavaScript?

  • 2008-09-25 19:27:06
  • sheats
  • 830627 View
  • 1323 Score
  • 24 Answer
  • Tags:   javascript

3 Answered Questions

[SOLVED] Cannot display HTML string

Sponsored Content