Nhờ giải thích logic đoạn code Javascript

Lupin_Arsene1 · December 18, 2021, 9:12am

<script type="text/javascript">
	var myList = document.getElementsByTagName('button');
	var arr = [1,2,3,4,5];
	for (var i = 0; i < 5; i++){
		myList[i].addEventListener('click', function (){
			console.log(i);
		})
	}
</script>

Ở trong body có 5 thẻ button ạ!
Ai biết dịch logic đoạn code này giúp em với. Em cảm ơn ạ!

mottramdong · December 18, 2021, 9:12am

sẽ trả về danh sách 5 tag button

không hiểu để làm gì

loop cơ bản trong đó

sự kiện click lên mỗi button

hungaya · June 28, 2018, 6:11am

Hai bạn học cùng trường?
Đoạn code gần giống như đúc, chỉ khác mỗi ‘li’ và ‘button’

SakaDream · June 28, 2018, 6:26am

Hoặc cùng một người

Khang_Viet · June 28, 2018, 11:18am

chắc phải dịch ra mã máy bạn mới hiểu được

Silicon · June 28, 2018, 4:44pm

cái này hình như có thể xảy ra 1 bug thì phải…

son0nine · June 29, 2018, 9:48am

bị confusing semantic kết quả khi click là 4

rogp10 · March 2, 2019, 11:22am

Cái này ra toàn số 5 thôi

Mảng arr đúng là dư thừa.

quaangle · March 2, 2019, 12:42pm

Để chèn console.log(i) để in ra từ 0 đến 5 ta phải có cách truyền i vào hàm callback trong addEventListener()

Cái này giải thích hơi dài dòng, để hiểu hãy đọc về cơ chế Event Loop và Callback queue của JavaScript.

Để sửa chương trình có thể thay: var i = 0 thành let i = 0 như dưới

<!DOCTYPE html>
<html>
    <head>
        <title>Test</title>
    </head>
    <body>
        <button>Button 1</button>
        <button>Button 2</button>
        <button>Button 3</button>
        <button>Button 4</button>
        <button>Button 5</button>
<script>
	var myList = document.getElementsByTagName('button');
	var arr = [1,2,3,4,5]; // dòng này thừa trong đoạn chương trình
	for (let i = 0; i < 5; i++){
		myList[i].addEventListener('click', function (){
			console.log(i);
		})
	}
</script>       
    </body>
</html>

Hoặc có thể dùng closure để lưu giá trị của i như sau:

<!DOCTYPE html>
<html>
    <head>
        <title>Test</title>
    </head>
    <body>
        <button>Button 1</button>
        <button>Button 2</button>
        <button>Button 3</button>
        <button>Button 4</button>
        <button>Button 5</button>
<script>
	var myList = document.getElementsByTagName('button');
	var arr = [1,2,3,4,5];
	for (var i = 0; i < 5; i++){
        (function foo() {
            var j = i;
        myList[j].addEventListener('click', function (){
			console.log(j);
		});
        }());
	}
</script>       
    </body>
</html>