Question

本月我刚开始使用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）中的数据集。

Answer 1

事物的结合-不要使用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>

Answer 2

为什么不这样：

        stmt.execute("CREATE_ROLE_PROC('SELECT_READ_I3Y_CR_JPBR')");

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);
    });
});

Answer 3

首先-要让array.forEach（）执行的函数需要一个要处理的元素。在您的情况下，这些是各个DIV元素。因此，您需要一个“链接”到该特定元素的参数。可以这样完成：

function myFunction(element);

您要查询的属性称为数据编号，因此建议您使用它。如果要获取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>

如何解决“未捕获的TypeError：无法读取未定义的属性'number'”？

3 个答案: