JavaScript getElementByID() không hoạt động

Tại sao refButton nhận được null trong mã JavaScript sau?JavaScript getElementByID() không hoạt động

<html> 
<head> 
    <title></title> 
    <script type="text/javascript"> 
     var refButton = document.getElementById("btnButton"); 

     refButton.onclick = function() { 
      alert('I am clicked!'); 
     }; 
    </script> 
</head> 
<body> 
    <form id="form1"> 
    <div> 
     <input id="btnButton" type="button" value="Click me"/> 
    </div> 
    </form> 
</body> 
</html>

Nguồn

2009-12-02 anonymous

Tại điểm bạn đang gọi chức năng của bạn, phần còn lại của trang đã không trả lại và do đó các phần tử không phải là tồn tại ở điểm đó. Hãy thử gọi chức năng của bạn theo số window.onload có thể. Một cái gì đó như thế này:

<html> 
<head> 
    <title></title> 
    <script type="text/javascript"> 
     window.onload = function(){ 
      var refButton = document.getElementById("btnButton"); 

      refButton.onclick = function() { 
       alert('I am clicked!'); 
      } 
     }; 
    </script> 
</head> 
<body> 
    <form id="form1"> 
    <div> 
     <input id="btnButton" type="button" value="Click me"/> 
    </div> 
    </form> 
</body> 
</html>

Nguồn

2009-12-02 00:28:43 jaywon

Hoặc xem xét sử dụng Prototype, JQuery hoặc một số gói khác để xử lý sự kiện sẵn sàng DOM. –

Tôi không nghĩ rằng anh ấy cần nhập toàn bộ thư viện chỉ cho sự kiện sẵn sàng DOM. ;) –

@Paul - điểm tốt. @JMSA sự kiện DOM sẵn sàng thực sự kích hoạt TRƯỚC KHI tất cả hình ảnh được tải xuống và SAU KHI tất cả các tập lệnh và trang đã được tải xuống. Do đó, sự kiện DOM sẵn sàng kích hoạt trước sự kiện window.onload. :) – jaywon

Bạn cần đặt JavaScript vào cuối thẻ body.

Nó không tìm thấy nó bởi vì nó chưa có trong DOM!

Bạn cũng có thể bọc nó trong xử lý sự kiện onload như thế này:

window.onload = function() { 
var refButton = document.getElementById('btnButton'); 
refButton.onclick = function() { 
    alert('I am clicked!'); 
} 
}

Nguồn

2009-12-02 00:28:18

Đây có phải là thực hành tiêu chuẩn hay chỉ trong trường hợp này? – anonymous

Thực hành tiêu chuẩn là bạn bắt đầu thực hiện từ khi tải trang. –

Thực hành tiêu chuẩn chỉ chạy tập lệnh sau khi cây DOM đã được tạo. –

Bởi vì khi kịch bản thực thi trình duyệt vẫn chưa phân tích các <body>, vì vậy nó không biết rằng có một phần tử với id được chỉ định.

Hãy thử điều này thay vì:

<html> 
<head> 
    <title></title> 
    <script type="text/javascript"> 
     window.onload = (function() { 
      var refButton = document.getElementById("btnButton"); 

      refButton.onclick = function() { 
       alert('Dhoor shala!'); 
      }; 
     }); 
    </script> 
    </head> 
<body> 
    <form id="form1"> 
    <div> 
     <input id="btnButton" type="button" value="Click me"/> 
    </div> 
</form> 
</body> 
</html>

Lưu ý rằng bạn cũng có thể sử dụng addEventListener thay vì window.onload = ... để làm cho chức năng đó chỉ thực hiện sau khi toàn bộ tài liệu đã được phân tích cú pháp.

Nguồn

2009-12-02 00:32:47

window.onload không kích hoạt cho đến khi toàn bộ tài liệu được phân tích cú pháp và tất cả các tệp được tải xuống – jaywon

JavaScript getElementByID() không hoạt động

Trả lời

Các vấn đề liên quan