我本月刚开始使用JavaScript,我想了解forEach方法以及data-set想法,以便为控制台上数组中的每个项目打印自定义data-setdata-number)。因此,当我单击按钮时,它将在控制台上显示每个数组项(div元素)的data-number

它不断返回错误


  “未捕获的TypeError:无法读取未定义的属性'number'”,即使我已为number分配了值。


我注意到,当我仅使用一个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)中的数据集。

最佳答案

几件事-不要使用forEach(),而在map()中使用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>

关于javascript - 如何解决“未捕获的TypeError:无法读取未定义的属性'number'”?,我们在Stack Overflow上找到一个类似的问题:https://stackoverflow.com/questions/55687684/

10-09 20:13
查看更多