Không thể gắn onclick bằng javascript

Mọi người giúp mình gắn sự kiện onclick vào listClsDv trong vòng for giúp mình để mình có thể click nút xóa chứ mình thử mọi kiểu gắn onclick từ addeventlistener hay .onclick rồi mà nút xóa vẫn không thể gắn được onlick :frowning:

<!DOCTYPE html>
<html>
<head>
    <title>To do list</title>
    <meta charset="utf-8"/>
    <style>
        
    </style>
 
    <script>
        var i;
        var cloneListClsDv;
        function onclickClose(){
            cloneListClsDv.removeChild(cloneListClsDv.childNodes[i]);
        }
        function inputClear(){
            document.getElementById('textbox').value = "";
        }
    
        function eventOfButton(inputClear){
            var textBValue = document.getElementById('textbox').value;

            var divTotal = document.createElement('DIV');
            divTotal.id = "Total";

            var divShow = document.createElement('DIV');
            var showContent = document.createTextNode(textBValue);
            divShow.appendChild(showContent);

            var closeDiv = document.createElement('BUTTON');
            closeDiv.id = 'dlt';
            var listClsDv = document.getElementById('dlt')
            cloneListClsDv = listClsDv;
            var closeBtn = document.createTextNode("Xóa")
            closeDiv.appendChild(closeBtn);

            divTotal.appendChild(divShow);
            divTotal.appendChild(closeDiv);
            document.getElementById('ad').appendChild(divTotal); 
            inputClear();

            for(i = 0 ; i < divTotal.length ; i++){
                listClsDv[i].addEventListener("click", onclickClose);
            }
        }
    

    </script>
</head>
<body>

<input type="text" id="textbox" placeholder="Xin mời nhập">

<button id="btn" onclick="eventOfButton(inputClear)">Thêm</button>

<div id="ad"></div>

<h2>JavaScript addEventListener()</h2>

<p>This example uses the addEventListener() method to attach a click event to a button.</p>

<button id="myBtn">Try it</button>

</body>
</html>

lúc js chạy thì html chưa render ra nên sai
mang code đó xuống cuối body

2 Likes

mình để dưới body rồi nhưng check nó vẫn k có cái onclick :frowning: nản quá

Nhìn qua thì thấy bạn sử dụng id là đã sai rồi. id chỉ được áp dụng cho một phần tử duy nhất chứ không phải nhiều phần tử. Chính vì vậy mà khi chạy đoạn

Thì listClsDv sẽ = null ==> Chả có nút nào được thêm Event cả.

Phải nói là sai nhiều không đếm xuể, sửa còn tốn thời gian hơn viết lại từ đầu ấy chứ.

1 Like
  1. Ý tưởng của bạn không hẳn là sai. Mình thấy hướng đi đúng chứ không cần đặt sau hay trước hay bỏ trong onload gì đâu.
  2. Ngay đoạn javascript, gõ debugger; vào chỗ cần debug. Khi đó chrome hoặc firefox, mở DevTools lên, sẽ tự động trigger breakpoint và pause tại ngay dòng debugger. Khi đó bạn có thể trace qua từng dòng và xem giá trị thay đổi
  3. Với những biết nó không nằm trong scope. Bạn có thể qua watch và gõ lệnh vào (như divTotal.length thì chrome sẽ tự động lấy giá trị ra cho bạn)
  4. Gợi ý là bạn bị lỗi 1 chỗ: divTotal.length. Khi này bạn sẽ lòi ra mớ lỗi còn lại.

4 Likes

cảm ơn bạn chứ trước h mình debug bằng tay mệt quá :frowning:

83% thành viên diễn đàn không hỏi bài tập, còn bạn thì sao?