admin 管理员组

文章数量: 1086019

I have this code in html,

<ul id="locationSelect" style="visibility: visible;">
  <li class="location-select" data-num="9"></li>
  <li class="location-select" data-num="9"></li>
  <li class="location-select" data-num="7"></li>
  <li class="location-select" data-num="6"></li>
</ul>

Now I want to get the value of data-num attribute when the user click on any <li> element using pure javascript.

Here the code for javascript so far.

let locSel = document.getElementById('locationSelect').getElementsByClassName('location-select');

for(var i=0; i < locSel.length; i++) {
    locSel[i].onclick = function() {
      let markerNum = locSel[i].dataset.num;
      google.maps.event.trigger(markers[markerNum], 'click');
    };
}

Given that code, I got undefined, on the part of locSel[i] and then got stack (I dont know the right spelling for this word stack). I have know idea.

any suggestion please?

I have this code in html,

<ul id="locationSelect" style="visibility: visible;">
  <li class="location-select" data-num="9"></li>
  <li class="location-select" data-num="9"></li>
  <li class="location-select" data-num="7"></li>
  <li class="location-select" data-num="6"></li>
</ul>

Now I want to get the value of data-num attribute when the user click on any <li> element using pure javascript.

Here the code for javascript so far.

let locSel = document.getElementById('locationSelect').getElementsByClassName('location-select');

for(var i=0; i < locSel.length; i++) {
    locSel[i].onclick = function() {
      let markerNum = locSel[i].dataset.num;
      google.maps.event.trigger(markers[markerNum], 'click');
    };
}

Given that code, I got undefined, on the part of locSel[i] and then got stack (I dont know the right spelling for this word stack). I have know idea.

any suggestion please?

  • javascript
Share Improve this question asked Apr 28, 2018 at 16:09 FilFil 8,89317 gold badges63 silver badges89 bronze badges
Add a ment  | 

3 Answers 3

Reset to default 3 
let locSel = document.getElementById('locationSelect').getElementsByClassName('location-select');

for(let i=0; i < locSel.length; i++) {
    locSel[i].onclick = function() {
      let markerNum = locSel[i].dataset.num;
      google.maps.event.trigger(markers[markerNum], 'click');
    };
}

When your onclick handler is called, i is equal to 4, so locSel[i] will always be undefined. This is because you declared i as a var and the same variable will live and be accessed through all your code.

In order to have i get a new binding for every iteration of the loop, use let instead of var:

for(let i=0; i < locSel.length; i++) {

const imgRef = document.querySelectorAll("img[data-src]");

const observer = (entries) => {
  entries.forEach((entry) => {
    if (!entry.isIntersecting) return;
    entry.target.src = imgRef.dataset.src;
  });
  console.log(entries);
};

const imgObserver = new IntersectionObserver(observer, {
  root: null,
  threshold: 0,
});
imgRef.forEach((image) => {
  imgObserver.observe(image);
});

In My Case i am trying to lazy load images using data-src But It is not defined i dont know if i have defined imgRef correctly or not

本文标签： javascriptI got undefined dataset when getting data attribute in htmlStack Overflow

版权声明：本文标题：javascript - I got undefined dataset, when getting data attribute in html - Stack Overflow 内容由网友自发贡献，该文观点仅代表作者本人， 转载请联系作者并注明出处：http://roclinux.cn/p/1744088418a2531573.html， 本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌抄袭侵权/违法违规的内容，一经查实，本站将立刻删除。