javascript - 如何访问具有相同类名的元素的数据属性？

Question

<div class="range" data-max="100">0-100</li>
<div class="range" data-max="200">0-200</li>
<div class="range" data-max="300">0-300</li>

我希望在我的 JavaScript 中访问 data-max。例如，如果我点击 0-200，我只会得到 200。这是我的 JavaScript。

const ranges = document.querySelectorAll(".range");
for(var i = 0; i < ranges.length; i++){
    ranges[i].addEventListener('click', function(){
        console.log(this.dataset.max);
    });
}

我点击0-200时的输出是

200 100

我预计 200。

这是我的问题:
1. 如何获得期望值---如示例中的200。
2. 我的代码中 this.dataset.max 的范围是什么？我认为它的范围是函数。
3.当我将其更改为ranges[i]时，ranges[i]似乎未定义。为什么？

guessNum.js:4 Uncaught TypeError: Cannot read property 'dataset' of undefined

我期待纯 JavaScript 的答案。请不要使用jquery。

Answer 1

好吧，你的 html 无效，如果你修复它，它就会工作。
发生的情况是 div 相互嵌套，并且点击事件在 div 中冒泡。

const ranges = document.querySelectorAll(".range");
for(var i = 0; i < ranges.length; i++){
    ranges[i].addEventListener('click', function(){
        console.log(this.dataset.max);
    });
}

<div class="range" data-max="100">0-100</div>
<div class="range" data-max="200">0-200</div>
<div class="range" data-max="300">0-300</div>