Hướng dẫn why is my javascript not working in html? - tại sao javascript của tôi không hoạt động trong html?

Vì vậy, thẻ JavaScript bạn vừa thêm vào trang web của bạn không hoạt động và bạn muốn đi đến phần thịt của vấn đề để bạn có thể khắc phục nó.

Như bất kỳ nhà phát triển có kinh nghiệm nào cũng sẽ nói với bạn, có nhiều lý do tại sao điều này có thể xảy ra. Và, tùy thuộc vào mức độ phức tạp của mã của bạn, việc tìm ra lý do đó có thể đưa bạn đến bất cứ nơi nào từ vài phút đến giờ googling và gỡ lỗi.

Hy vọng sẽ giúp giúp bạn tiết kiệm một thời gian, trong bài đăng này, tôi đã biên soạn một danh sách những lỗi phổ biến nhất có thể làm cho mã JavaScript của bạn không hoạt động.

Sự cố với thẻ

Nếu mã JavaScript của bạn không hoạt động, điều đầu tiên bạn nên làm là kiểm tra thẻ // Old version that's no longer there 2.

Bạn có sai chính tả không? Bạn đã bỏ qua một dấu gạch chéo về phía trước (/), dấu ngoặc kép (‘), ít hơn () dấu hiệu?

Những sai lầm này xảy ra thường xuyên hơn chúng ta nghĩ, đặc biệt là khi chúng ta làm việc vào đêm khuya, với khoảng chú ý giảm, để đáp ứng thời hạn chặt chẽ.

Dưới đây, tôi đã liệt kê một vài ví dụ cho những điều có thể sai:

// Correct spelling


// Misspelled opening


// Misspelled type="" attribute


// Dash instead of forward slash in type="" attribute


// Misspelled closing

Con đường tương đối sai hoặc URI

Nếu bạn đang tải tập lệnh của mình từ một vị trí khác, chẳng hạn như máy chủ của bạn hoặc CDN, hãy đảm bảo rằng bạn sử dụng đúng URI. Trong trường hợp bạn đang ở, hãy kiểm tra xem tệp có còn đó không.

Giả sử bạn đang tải tập lệnh từ máy chủ của riêng bạn và bạn đang thực hiện nó với một đường dẫn tương đối. Kiểm tra đường dẫn tương đối đó và đảm bảo nó chính xác.

Nếu bạn đang tải tập lệnh từ CDN, hãy thử mở URI trong trình duyệt của bạn và xem liệu tệp có còn đó không. Các tập lệnh, đặc biệt là các thư viện, thường được cập nhật và các phiên bản kế thừa được không dùng nữa.

// Mistyped relative path


// Old version that's no longer there

Vị trí thẻ sai

Nếu thẻ // Old version that's no longer there 4 thay vì đầu thẻ

// Mistyped relative path


// Old version that's no longer there
5.

Không phải tất cả các tập lệnh nên có trình nghe cho sự kiện DomContented đều có nó và tải các tập lệnh cần đọc DOM trước khi DOM được tải đầy đủ là một vấn đề rất, rất phổ biến.

Ví dụ: đoạn mã JavaScript sau đây đã giành được công việc vì thẻ được triển khai trong tài liệu HTML,

// Mistyped relative path


// Old version that's no longer there
5 và, khi nó cố gắng chọn
// Mistyped relative path


// Old version that's no longer there
7, nó đã giành được và được phân tích bởi cửa sổ trình duyệt:







Có hai giải pháp cho điều này.

Một là thêm trình nghe sự kiện cho sự kiện DomContentLoaded:







Cái còn lại là đặt thẻ ngay trước khi đóng thẻ

// Mistyped relative path


// Old version that's no longer there
4:






Cả hai giải pháp này sẽ kích hoạt mã JavaScript sau khi phần tử DOM cần truy vấn đã được trình duyệt được tải và phân tích đầy đủ.

Các vấn đề với mã

Không kém phần phổ biến là các vấn đề với chính mã, thường xuyên hơn không phải do mệt mỏi hay vội vàng. Trưởng trong số đó là (1) chức năng bị nhầm lẫn hoặc tên biến và (2) khai báo sai.

Tin tốt là, bằng cách kiểm tra các thông báo lỗi trong bảng điều khiển trình duyệt, bạn có thể bắt những thông báo này nhanh chóng và dễ dàng vì chúng có xu hướng ném:

  • Tham chiếu Hiểu khi bạn sử dụng sai tên để tham khảo một chức năng hoặc biến. when you’re using the wrong name to reference a function or variable.
  • Cú pháp khi bạn đã nhầm lẫn một cái gì đó hoặc bỏ qua một nhân vật bên trong câu lệnh của chức năng của bạn. when you’ve mistyped something or omitted a character inside your function’s statement.

Cố gắng loại trừ những điều này trước khi bạn tiếp tục gỡ lỗi mã của mình.

Tên sai lầm

Nếu bạn đánh máy tên của bạn tên của bạn:

// Function statement
function myFunction() {};

// Function call with mistyped name
myFuntion(); // Uncaught ReferenceError: myFuntion is not defined

Hoặc một không đổi tên hoặc tên biến trong chức năng của bạn:

function myFunction() {
  let myVar = "Something";
  console.log(myVr); // Uncaught ReferenceError: myVr is not defined
};

Bạn sẽ thấy một tài liệu tham khảo chưa được khai thác trong bảng điều khiển trình duyệt.

Cú pháp sai

Nếu bạn là nhà phát triển đầy đủ và bạn tiếp tục chuyển đổi qua lại giữa HTML/CSS và JavaScript trên mặt trận và bất kỳ ngôn ngữ nào bạn đang sử dụng trên phần phụ trợ, thì đó chỉ là vấn đề thời gian cho đến khi bạn mắc lỗi và trộn lẫn Cú pháp giữa các ngôn ngữ.

Khi nghi ngờ, hãy kiểm tra cú pháp của:

  • Ngoặc đơn () sau
    // Mistyped relative path
    
    
    // Old version that's no longer there
    
    9,
    
    
    
    
    
    
    
    0,
    
    
    
    
    
    
    
    1,
    
    
    
    
    
    
    
    2.
  • Dấu ngoặc xoăn {} cho các khối câu lệnh cá nhân (chú ý thêm vào các câu lệnh trong các câu lệnh, a.k.a. câu lệnh lồng nhau).
  • Khung vuông [] và phương thức
    
    
    
    
    
    
    
    3 cho các mảng.
  • Dấu trích dẫn cho các chuỗi (chú ý thêm vào các trích dẫn trong dấu ngoặc kép, a.k.a. trích dẫn lồng nhau).
  • Việc sử dụng các phương thức và toán tử JavaScript để lưu trữ, thao tác và so sánh dữ liệu trong các đối tượng (bạn có đang sử dụng đúng không?).
  • Dấu chấm phẩy; giữa các câu trong một vòng lặp.

Hai tài liệu tham khảo của tôi cho cú pháp là tài liệu web MDN và bảng gian lận JavaScript này.

Const, Let và var khai báo

Trong JavaScript, bạn có thể khai báo các giá trị bằng cách sử dụng







4,






5 và






6.

Tuyên bố mà bạn chọn có ý nghĩa quan trọng đối với mã của bạn vì nó xác định những gì bạn có thể có được và không thể làm cho mục dữ liệu mà bạn vừa lưu trữ trong bộ nhớ.

Theo nguyên tắc chung, ở đây, cách chọn giữa các khai báo







4,






5 và






6 trong JavaScript:

  • Sử dụng
    
    
    
    
    
    
    
    4 để khai báo hằng số chỉ đọc.
  • Sử dụng
    
    
    
    
    
    
    
    5 để khai báo một biến cục bộ giới hạn trong phạm vi của câu lệnh khối mà nó đã khai báo trong (cũng như bất kỳ khối phụ nào).
  • Sử dụng
    
    
    
    
    
    
    
    6 để khai báo biến toàn cầu hoặc biến cục bộ giới hạn trong chức năng mà nó đã khai báo.

Với tất cả những gì đã nói, chúng ta hãy xem một số vấn đề hàng đầu liên quan đến những hạn chế của ba tuyên bố này trong JavaScript.

Cố gắng tái tạo một hằng số:

Bạn có thể điều chỉnh lại một







4. Nếu bạn cố gắng làm điều đó, như được hiển thị trong ví dụ dưới đây, trình duyệt sẽ ném một cú pháp chưa được xử lý lại vào bạn:

// Declares constant myList
const myList = '1,2,3,4,5';

const myList = '6,7,8,9,10'; // Uncaught SyntaxError: Identifier 'myList' has already been declared

Dự kiến, nếu bạn đang cố gắng tái cấu trúc một hằng số với các giá trị được cập nhật, thì nó đã giành được công việc và nó có thể phá vỡ luồng dữ liệu trong ứng dụng của bạn.

Cố gắng tái cấu trúc một biến







5 trong cùng một tuyên bố:

Một biến







5 chỉ có thể được khai báo một lần trong một câu lệnh. (Nhưng nó có thể được chỉ định lại nhiều lần như bạn cần.)

Điều này có nghĩa là bạn có thể sử dụng lại các tên biến, như







6,






7 và






8 trên các chức năng và câu lệnh, miễn là bạn không cố gắng làm như vậy trong cùng một khung hoặc khung phụ.

function myFunction() {
if (x) {
  // Declare once
  let y;

  // Try to redeclare
  let y; // SyntaxError
}
}

Hãy ghi nhớ điều này, đặc biệt là nếu bạn mới sử dụng JavaScript hoặc nếu bạn có kinh nghiệm với nó, nhưng bạn chỉ mới bắt đầu sử dụng khai báo







5 trong mã của mình. Đây là một ràng buộc tinh tế, và nó có thể gây ra những lỗi tinh tế. 🙂

Hình ảnh lịch sự của Igor Vetushko /Depositphotos

Tại sao tệp JS không hoạt động trong HTML?

Bạn nên đặt tất cả mã JavaScript vào một thẻ để trình duyệt nhận dạng và làm cho nó chạy và cho thuộc tính SRC của thẻ tập lệnh để tìm tập lệnh của bạn. Tệp của JS, nó chỉ phải nằm trong cùng thư mục với tệp HTML, bạn không cần chỉ định toàn bộ gốc tệp.it just has to be in the same directory as the html file, you don't need to specify the entire file root.

Tại sao JavaScript không hoạt động trên trang web của tôi?

Trên menu Trình duyệt web Nhấp vào "Chỉnh sửa" và chọn "Tùy chọn". Trong cửa sổ "Tùy chọn", chọn tab "Bảo mật". Trong phần Tab "Bảo mật" "Nội dung web" Đánh dấu hộp kiểm "Bật JavaScript". Nhấp vào nút "Tải lại trang hiện tại" của trình duyệt web để làm mới trang.

Làm thế nào bao gồm JavaScript trong mã HTML?

Trong HTML, mã JavaScript được chèn giữa và thẻ.between tags.

Vấn đề với JavaScript là gì?

Ngày nay, hầu hết các sự cố JavaScript trình duyệt chéo được nhìn thấy: khi mã đánh hơi trình duyệt chất lượng kém, mã phát hiện tính năng và các trình duyệt khối sử dụng tiền tố nhà cung cấp từ mã chạy mà họ có thể sử dụng tốt.Khi các nhà phát triển sử dụng các tính năng JavaScript mới/mới, API web hiện đại, v.v.)When poor-quality browser-sniffing code, feature-detection code, and vendor prefix usage block browsers from running code they could otherwise use just fine. When developers make use of new/nascent JavaScript features, modern Web APIs, etc.)