HTML không nhận ra chức năng JavaScript

Question

Các tập lệnh có thể được đặt bên trong phần thân hoặc phần đầu của trang HTML hoặc bên trong cả phần đầu và phần thân. Chúng tôi cũng có thể đặt javascript bên ngoài tệp HTML có thể được liên kết bằng cách chỉ định nguồn của nó trong thẻ script

Nội dung chính Show

Các vấn đề với thẻ
Thẻ sai chính tả
Đường dẫn tương đối hoặc URI sai
Vị trí thẻ sai
Các vấn đề với mã
sai cú pháp
Khai báo Const, Let và Var
Tại sao JavaScript của tôi không hoạt động trong HTML?
Làm cách nào để chạy một hàm JavaScript trong HTML?
Làm cách nào để thêm chức năng JavaScript trong HTML?
Làm cách nào để gọi hàm JavaScript bên ngoài trong HTML?

JavaScript trong đầu. Hàm JavaScript được đặt bên trong phần đầu của trang HTML và hàm này được gọi khi nhấp vào nút.

ví dụ.

html

<html>

<head>

<script>

html1html2

html1html4

html1____37_______6

html8_______45_______>

html8head>

<>7>

0

html8_______38_______7>

< 7 8 9<0

<1_______36_______2 9<4>

<7

html8_______39_______7>

<head4 head5 9head7

html1head9 9>1>

>4

html8_______41_______4>

html8html>

đầu ra.

JavaScript trong cơ thể. Hàm JavaScript được đặt bên trong phần nội dung của trang HTML và hàm được gọi khi nhấp vào nút. Thí dụ.

html

<html>

<head>

html8head>

<<5>

<>7>

html1script2

html8_______38_______7>

< 7 8 9<0>

html1____36_______7

html8_______39_______7>

<head4 head5 9head7

html16_______41_______9 9>1>

html1html22

html8_______41_______4>

<script>

html1html2

html16______37_______4

html1____37_______6

html8_______45_______>

html8_______36_______5>

html8html>

đầu ra.

JavaScript bên ngoài. JavaScript cũng có thể được sử dụng làm tệp bên ngoài. Tệp JavaScript có phần mở rộng tệp. js. Để sử dụng tập lệnh bên ngoài, hãy đặt tên của tệp tập lệnh trong thuộc tính src của thẻ tập lệnh. Tập lệnh bên ngoài không thể chứa thẻ tập lệnh.

Vì vậy, thẻ JavaScript bạn vừa thêm vào trang web của mình không hoạt động và bạn muốn tìm hiểu vấn đề cốt lõi để 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ẽ cho bạn biết, có nhiều lý do khiến đ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 kỳ đâu từ vài phút đến hàng giờ để googling và gỡ lỗi

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

Các vấn đề 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 there2

Bạn có viết sai chính tả gì không?

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 đến tận đêm khuya, với sự chú ý giảm sút, để đáp ứng thời hạn chặt chẽ

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

// Correct spelling


// Misspelled opening


// Misspelled type="" attribute


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


// Misspelled closing

Đường dẫn tương đối hoặc URI sai

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ủ hoặc CDN, hãy đảm bảo rằng bạn đang sử dụng đúng URI. Trong trường hợp của bạn, 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 chính mình và bạn đang thực hiện việc đó với một đường dẫn tương đối. Kiểm tra đường dẫn tương đối đó và đảm bảo rằng nó đúng

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 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 cũ không được 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 there4 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 cần có một trình lắng nghe cho sự kiện DOMContentLoaded đều có nó và việc 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 sẽ không hoạt động vì thẻ được triển khai trong tài liệu HTML's

// 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ó sẽ chưa được tải và phân tích cú pháp bởi cửa sổ trình duyệt

Có hai giải pháp cho việc này

Một là thêm trình xử lý sự kiện cho sự kiện DOMContentLoaded

________số 8_______

Cách khác 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 tải và phân tích cú pháp đầy đủ

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

Các vấn đề với mã cũng phổ biến không kém, thường là do mệt mỏi hoặc vội vàng. Đứng đầu trong số đó là (1) gõ sai tên hàm 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 của trình duyệt, bạn có thể nắm bắt những thông báo này một cách nhanh chóng và dễ dàng vì chúng có xu hướng ném ra ngoài.

ReferenceError khi bạn sử dụng sai tên để tham chiếu một hàm hoặc biến
SyntaxError khi bạn nhập sai thứ gì đó hoặc bỏ sót một ký tự bên trong câu lệnh của hàm

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

Nếu bạn nhập sai tên chức năng của bạn

// Function statement
function myFunction() {};

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

Hoặc tên của hằng số hoặc biến trong hàm 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 ReferenceError Uncaught trong bảng điều khiển của trình duyệt

sai cú pháp

Nếu bạn là Nhà phát triển Full-Stack và bạn liên tục chuyển đổi qua lại giữa HTML/CSS và JavaScript ở giao diện người dùng và bất kỳ ngôn ngữ nào bạn đang sử dụng ở phần phụ trợ, thì vấn đề chỉ là thời gian cho đến khi bạn mắc lỗi và lẫn lộn

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

Dấu ngoặc đơn () sau các câu lệnh

// Mistyped relative path


// Old version that's no longer there

9,

0,

1,

2

Dấu ngoặc nhọn {} cho các khối câu lệnh riêng lẻ (chú ý nhiều hơn đến các câu lệnh trong các câu lệnh, một. k. a. câu lệnh lồng nhau)

Phương pháp dấu ngoặc vuông [] và

3 cho mảng

Dấu ngoặc kép cho chuỗi (chú ý nhiều hơn đến dấu ngoặc kép trong dấu ngoặc kép, dấu ngoặc kép. k. a. trích dẫn lồng nhau)
Cách 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 cách không?)
Dấu chấm phẩy ;

Hai tài liệu tham khảo cú pháp của tôi là MDN Web Docs và trang lừa đảo JavaScript này

Khai báo Const, Let và Var

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

4,

5 và

6

Khai báo 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ể—và không thể—làm đối với (các) mục dữ liệu mà bạn vừa lưu trữ trong bộ nhớ

Theo nguyên tắc chung, đây là 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ó được khai báo trong (cũng như bất kỳ khối phụ nào)
Sử dụng
6 để khai báo một biến toàn cục hoặc biến cục bộ giới hạn trong hàm mà nó được khai báo trong

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

Cố gắng khai báo lại một hằng số

Bạn không thể khai báo lại một

4. Nếu bạn cố gắng làm điều đó, như trong ví dụ bên dưới, trình duyệt sẽ ném lại cho bạn một lỗi Uncaught SyntaxError

// 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ố khai báo lại một hằng số với các giá trị được cập nhật, thì nó sẽ không hoạt động và có thể làm gián đoạn luồng dữ liệu trong ứng dụng của bạn

Cố gắng khai báo lại một biến

5 trong cùng một câu lệnh

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 nếu 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 giữa các hàm 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 dấu ngoặc đơn hoặc dấu ngoặc 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 nếu bạn là người 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 trong thời gian gần đây. Đây là một ràng buộc tinh vi và nó có thể gây ra các lỗi tinh vi. 🙂

Tại sao JavaScript của tôi không hoạt động trong HTML?

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ẻ . Khi bạn đưa JavaScript vào tài liệu HTML của mình bằng thẻ

Làm cách nào để chạy một hàm JavaScript trong HTML?

Để đưa tệp JavaScript của chúng ta vào tài liệu HTML, chúng ta phải sử dụng thẻ script js"> và trong thuộc tính "src", chúng tôi phải cung cấp đường dẫn đến tệp JavaScript nơi tệp được lưu trữ.

Làm cách nào để thêm chức năng JavaScript trong HTML?

Bạn có thể thêm mã JavaScript vào tài liệu HTML bằng cách sử dụng thẻ HTML chuyên dụng . Thẻ

Làm cách nào để gọi hàm JavaScript bên ngoài trong HTML?

Để bao gồm một tệp JavaScript bên ngoài, chúng ta có thể sử dụng thẻ script với thuộc tính src . Bạn đã sử dụng thuộc tính src khi sử dụng hình ảnh. Giá trị cho thuộc tính src phải là đường dẫn đến tệp JavaScript của bạn. Thẻ tập lệnh này phải được bao gồm giữa các thẻ

programming javascript

HTML không nhận ra chức năng JavaScript

html

html

Các vấn đề với thẻ

Đường dẫn tương đối hoặc URI sai

Vị trí thẻ sai

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

Tên sai

sai cú pháp

Khai báo Const, Let và Var

Tại sao JavaScript của tôi không hoạt động trong HTML?

Làm cách nào để chạy một hàm JavaScript trong HTML?

Làm cách nào để thêm chức năng JavaScript trong HTML?

Làm cách nào để gọi hàm JavaScript bên ngoài trong HTML?

Bài Viết Liên Quan

Quảng Cáo

Có thể bạn quan tâm

Toplist được quan tâm

Quảng cáo

Xem Nhiều

Quảng cáo

Chúng tôi

Điều khoản

Trợ giúp

Mạng xã hội