Nhận giá trị của nút javascript được nhấp

Trong hướng dẫn này, chúng ta sẽ xem cách Nhận giá trị phần tử đầu vào khi nhấp bằng JavaScript. Sự kiện title được sử dụng với phương thức HTML Dom getElementsByTagName cho việc này

Mục lục

Mã HTML

Mã HTML được cung cấp bên dưới, Mã này chứa phần tử nút với sự kiện title và phần tử đầu vào

________0

sự kiện title

Mã JavaScript được đưa ra bên dưới, Trong mã này, sự kiện title được sử dụng để lấy giá trị của phần tử đầu vào

Sự kiện title xảy ra khi một phần tử được nhấp vào, nó được sử dụng để gọi một hàm JavaScript khi xảy ra sự kiện nhấp chuột

Phương thức HTML Dom getElementsByTagName

Phương thức HTML Dom getElementsByTagName trả về tập hợp phần tử có tên thẻ được chỉ định

Trong mã này, nó được sử dụng để lấy phần tử đầu vào. Sau khi nhắm mục tiêu yếu tố đầu vào,. phương thức giá trị được sử dụng để lấy giá trị của nó

Hướng dẫn này trình bày cách lấy ID của nút được nhấp theo bốn phương pháp khác nhau. Các phương thức này là this.id, event.target.id, addEventListener và jQuery

Nhận ID nút được nhấp bằng phương thức This.id trong JavaScript

Bạn sẽ làm điều này bằng cách tạo một chức năng được kích hoạt khi bạn nhấp vào nút. Vì vậy, khi bạn nhấp vào nút, chức năng sẽ nhận ID nút thông qua this.id

Mặc dù giá trị của this phụ thuộc vào cách nó được gọi. Trong trường hợp này, nó sẽ đề cập đến nút và các thuộc tính của nút, chẳng hạn như ID nút

    
        First Button
        Second Button
        Third Button
    

    

đầu ra

Chúng tôi có ba nút có ID khác nhau với thuộc tính sự kiện

    
        Button_1
        Button_2
        Button_3
    

    

0 trong khối mã ở trên. Giá trị của thuộc tính sự kiện

    
        Button_1
        Button_2
        Button_3
    

    

0 là một hàm có đối số là this.id hoặc ID nút

Nhận ID nút được nhấp bằng phương thức

    
        Button_1
        Button_2
        Button_3
    

    

3 trong JavaScript

Bạn có thể nhận ID nút trong sự kiện nhấp chuột nhờ thuộc tính

    
        Button_1
        Button_2
        Button_3
    

    

4 của giao diện

    
        Button_1
        Button_2
        Button_3
    

    

5. Thuộc tính

    
        Button_1
        Button_2
        Button_3
    

    

4 đề cập đến phần tử nút đã nhận sự kiện nhấp chuột từ người dùng

Đồng thời, bạn có thể lấy ID của nút từ thuộc tính

    
        Button_1
        Button_2
        Button_3
    

    

4 thông qua

    
        Button_1
        Button_2
        Button_3
    

    

8. Trong ví dụ mã bên dưới, chúng tôi đã tạo một hàm sử dụng event.target.id để hiển thị ID của nút được nhấp

    
        Button_1
        Button_2
        Button_3
    

    

đầu ra

Nhận ID nút được nhấp với chức năng addEventListener trong JavaScript

Bạn có thể triển khai chức năng tùy chỉnh sử dụng trình xử lý sự kiện để lấy ID của phần tử. Đây sẽ là yếu tố kích hoạt một sự kiện

Đặt chức năng tùy chỉnh trong phần trang web của bạn. Bằng cách này, nó sẽ có sẵn trước khi phần còn lại của trang web tải xuống

Trong đoạn mã sau, chúng tôi đã sử dụng chức năng tùy chỉnh để thêm các sự kiện nhấp chuột vào tập hợp các nút. Vì vậy, khi bạn chạy mã trong trình duyệt web của mình, bạn sẽ nhận được thông báo cảnh báo JavaScript hiển thị ID nút

    


    
        Code-1
        Code-2
        Code-3
    

đầu ra

Nhận nút được nhấp với jQuery

Cách tiếp cận này giống như ví dụ đầu tiên trong bài viết này, nhưng chúng tôi sẽ sử dụng jQuery. jQuery cung cấp hàm

    


    
        Code-1
        Code-2
        Code-3
    

1 mà bạn có thể đính kèm vào một phần tử để lấy ID của phần tử thông qua this.id

Mã bên dưới có các nút có ID và thuộc tính lớp. Chúng tôi sử dụng jQuery để lấy tên lớp nút và chúng tôi đính kèm một sự kiện nhấp chuột cho tất cả và khi bạn nhấp vào bất kỳ nút nào, bạn sẽ nhận được ID của nó trong cửa sổ

    


    
        Code-1
        Code-2
        Code-3
    

3 trong trình duyệt web của bạn

Làm cách nào để lấy giá trị của nút được nhấp trong JavaScript?

Làm cách nào để kiểm tra nút nào đã được nhấp trong JavaScript?

Làm cách nào để lấy phần tử nút trong JavaScript?

Làm cách nào để lấy giá trị của một nút trong jQuery?