Asked Jun 5th, 6:17 a.m. 87 0 1
  • 87 0 1
0

Vòng lặp for trong javascript

Share
  • 87 0 1

mình có một đoạn code như bên dưới đây và theo mình hiểu thì mỗi lần mình click vào class "container__notice" nào thì class đó sẽ nhận sự kiện như vậy thì việc bỏ vòng lặp for đi và bỏ [i] ở bubblyButtons đi thì code vẫn phải chạy chứ nhỉ.Bạn nào giải thích giúp mình với.Mình muốn khi bấm vào cái button thì cái thẻ div nhận sự kiện chứ không phải cái button nhận sự kiện.

 <div  class="container__notice"></div>
<center><button class="container__notice" target="blank" title="Code Pro">Click me!</button></center>

<script>
           var animateButton = function(e) {
                  e.target.classList.remove('animate');
                  e.target.classList.add('animate');
                       setTimeout(function() {
	                   e.target.classList.remove('animate');
                      }, 700);
           };
          var bubblyButtons = document.getElementsByClassName("container__notice");
           for (var i = 0; i < bubblyButtons.length; i++) {
              bubblyButtons[i].addEventListener('click', animateButton, false);
         }
</script>

1 ANSWERS


Answered Jun 6th, 9:46 a.m.
Accepted
+2

Question 1: click vào class "xxx" nào thì class đó sẽ nhận sự kiện?

-> Bạn hiểu đúng r, tuy nhiên code của bạn đang viết theo cách addEventListener tức là nó sẽ thêm event vào tag cho bất kỳ tag nào đc get từ: document.getElementsByClassName (ở đây ta có 2 tags: div và button). Kiểu như này: Cô bảo đứa nào tên Thịnh thì auto + 3 điểm. bạn tên Thịnh và 1 đứa khác cũng tên Thịnh sau khi đc cô giáo bảo như vậy thì sẽ auto + 3

Quesion 2: bấm vào cái button thì cái thẻ div nhận sự kiện chứ không phải cái button nhận sự kiện?

-> Bạn có thể onClick trực tiếp lên thẻ div bạn muốn: https://www.w3schools.com/jsref/event_onclick.asp

-> sử dụng Id cho thẻ div đó và ở script thì:

  var noticeContent = document.getElementById("your_id");
noticeContent.addEventListener('click', animateButton, false)

-> hoặc bạn ko muốn thêm thắt bất kỳ cái gì nữa: thì đây là option cuối cùng cho bạn:


      for (var i = 0; i < bubblyButtons.length; i++) {
        if (i === 0) {
          bubblyButtons[i].addEventListener("click", animateButton, false);
        }
      }

mỗi cái có ưu và nhược điểm riêng, bạn tự phân tích nhé.

Ngoài luồng: quả avata của bạn xinh đấy, nếu ko phải crush hay người yêu bạn thì cho tui xin info

Share
Viblo
Let's register a Viblo Account to get more interesting posts.