我本月刚开始使用JavaScript,我想了解forEach
方法以及data-set
想法,以便为控制台上数组中的每个项目打印自定义data-set
(data-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/