开发者问题收集

如何修复“未捕获的类型错误：无法读取未定义的属性‘number’”？

2019-04-15
2138
javascript html arrays

我本月刚刚学习 JavaScript，并尝试理解 forEach 方法以及 data-set 思想，以便在控制台上打印数组中每个项目的自定义 data-set ( data-number )。因此，当我单击按钮时，它会在控制台上显示每个数组项（div 元素）的 data-number 。

它不断返回错误

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

我注意到，当我只使用一个 div 元素并删除“ Array.from ”时，它会在控制台上打印该元素的 data-number ，没有任何错误。

可能是语法问题，还是我遗漏了什么？ 

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>

我希望获得一个简单的数组，显示我在 div 标签中保存的数据集（即 1、2、3、4）。

3个回答

有几件事 - 不要使用 forEach() ，而是在 myFunction 中使用 map() ： 

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>
Jack Bashford
2019-04-15

为什么不像这样： 

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>
caramba
2019-04-15

首先 - 您希望 array.forEach() 执行的函数需要一个元素来处理。在您的例子中，这些是单独的 DIV 元素。因此，您的函数需要一个“链接”到该特定元素的参数。 这可以像这样完成： 

function myFunction(element);

您要查询的属性称为 data-number ，因此我建议使用它。如果您想获取 DOM 元素的特定属性，可以使用 element.getAttribute(attribute); 这是一个完整的示例： 

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>
obscure
2019-04-15