Cổng Khoa học Máy tính dành cho những người yêu thích máy tính. Nó bao gồm các bài báo về khoa học máy tính và lập trình được viết tốt, tư duy tốt và được giải thích tốt, các câu đố và thực hành / lập trình cạnh tranh / các câu hỏi phỏng vấn công ty.

Bạn đang xem : object htmlbuttonelement get id

Làm cách nào để lấy ID của nút được nhấp bằng JavaScript / jQuery?

Cho một tập hợp của nút và nhiệm vụ là xác định ID của nút khi nó được nhấp bằng JavaScript và jQuery.

Lấy ID của nút được nhấp bằng JavaScript < / p>

Ví dụ 1: Ví dụ này đặt sự kiện onClick cho mỗi nút, khi nút được nhấp, ID của nút được chuyển cho hàm sau đó in ID trên màn hình.

& lt;! DOCTYPE HTML & gt;

& lt; html & gt;

& lt; head & gt;

& lt; title & gt;

Lấy ID của nút được nhấp

sử dụng JavaScript

& lt; / title < code class = "trơn"> & gt;

& lt ; / head & gt;

& lt; body style = "text-align: center;" & gt;

& lt; h1 style = "color: green;" & gt;

GeeksForGeeks

< p class = "line number14 index13 alt1"> & lt; / h1 & gt;

& lt; p id = "GFG_UP" style =

"font-size: 15px; font-weight: bold;" & gt;

& lt; / p & gt;

& lt; nút id = < code class = "string"> "1" onClick = "GFG_click (this.id) " & gt;

Nút1

Nút & lt; / & gt;

& lt; nút id = "2" onClick = "GFG_click (this.id)" & gt;

Button2

& lt; / nút & gt;

& lt; nút id = " 3 " onClick < code class = "trơn"> = "GFG_click (this.id)" & gt;

Button3

& lt; / nút & gt;

& lt; p id < / code> = "GFG_DOWN" < / code> style =

" color: green; font-size: 20px; font-weight: bold; " & gt;

< / code> & lt; / p & gt;

< p class = "line number35 index34 alt2">

& lt; script & gt;

var el_up = document.getElementById ("GFG_UP");

var el_down = document.getElementById ("GFG_DOWN"); < / p>

el_up.innerHTML =" Nhấp vào nút để lấy ID ";

< / p>

hàm GFG_click (đã nhấp) {

el_down.innerHTML = "ID =" + click;

}

& lt; / script & gt;

& lt; / body & gt;

& lt; / html & gt;

 
  

Đầu ra:

  • Trước khi nhấp vào nút:
    • Sau khi nhấp vào nút:

    Ví dụ 2: Ví dụ này đặt một sự kiện onClick trong & lt; script & gt; gắn thẻ riêng cho từng nút, Khi nhấp vào nút, ID của nút được chuyển đến hàm và sau đó in ID trên màn hình.




    < code class = "trơn"> & lt;! LOẠI TÀI LIỆU HTML & gt;

    & lt; html & gt;

    & lt; head & gt;

    & lt; title & gt;

    Lấy ID của nút được nhấp

    trong JavaScript

    & lt; / title < code class = "trơn"> & gt;

    & lt ; / head & gt;

    & lt; body style = "text-align: center;" & gt;

    & lt; h1 style = "color: green;" & gt;

    GeeksForGeeks

    < p class = "line number14 index13 alt1"> & lt; / h1 & gt;

    & lt; p id = "GFG_UP" style =

    "font-size: 15px; font-weight: bold;" & gt;

    & lt; / p & gt;

    & lt; nút id = "1" & gt; Nút 1 & lt; / nút & gt;

    & lt; Nút id = "2" < / p>

    & lt; < nút code class = "keyword"> id = "3" < / code> & gt; Nút 3 & lt; / nút & gt;

    & lt; p id = " GFG_DOWN " style =

    "color: green; font-size: 20px; font-weight: bold;" & gt;

    & lt; / p & gt;

    & lt; script & gt;

    var el_up = document.getElementById ("GFG_UP");

    var el_down = document.getElementById (" GFG_DOWN ");

    el_up.innerHTML =" Nhấp vào nút để lấy ID ";

    < p class = "line number32 index31 alt1 highlighted">

    < / code> document.getElementById ('1'). onclick = GFG_click;

    document.getElementById ('2'). onclick = GFG_click;

    document.getElementById ('3'). onclick = GFG_click;

    chức năng GFG_click (đã nhấp) {

    el_down.innerHTML = "Đã nhấp vào nút, id ="

    < / code> + this.id;

    < code class = "trơn">}

    & lt ; / script & gt;

    & lt; / body & gt;

    & lt; / html & gt;

     
      

    Đầu ra:

    • Trước khi nhấp vào nút:
        • Sau khi nhấp vào nút:

        Nhận ID của nút được nhấp bằng cách sử dụng jQuery

        Phương pháp jQuery on (): Đây phương thức thêm một hoặc nhiều trình xử lý sự kiện cho các phần tử đã chọn và phần tử con.

        Cú pháp:

         $ (selector) .on (event, childSelector, data , chức năng, bản đồ) 

        Tham số:

        • sự kiện: Tham số này là bắt buộc. Nó chỉ định một hoặc nhiều (các) sự kiện hoặc không gian tên để gắn vào các phần tử đã chọn. Trong trường hợp có nhiều giá trị sự kiện, các giá trị này được phân tách bằng dấu cách. Sự kiện phải hợp lệ.
        • childSelector: Tham số này là tùy chọn. Nó chỉ định rằng trình xử lý sự kiện chỉ nên được đính kèm với các phần tử con đã xác định.
        • data: Tham số này là tùy chọn. Nó chỉ định dữ liệu bổ sung để chuyển vào hàm.
        • function: Tham số này là bắt buộc. Nó chỉ định hàm để chạy khi sự kiện xảy ra.
        • map: Nó chỉ định một bản đồ sự kiện ({event: func (), event: func (),…}) có một hoặc nhiều sự kiện để thêm vào các phần tử đã chọn và các hàm để chạy khi sự kiện xảy ra.

        jQuery click ( ) Phương pháp: Phương pháp này kích hoạt sự kiện nhấp chuột hoặc thêm một chức năng để chạy khi sự kiện nhấp chuột xảy ra. Sự kiện nhấp chuột xảy ra khi một phần tử được nhấp vào.

        Cú pháp:

        • Kích hoạt sự kiện nhấp chuột cho các phần tử đã chọn:
           $ (selector) .click () 
        • < li> Thêm một hàm vào sự kiện nhấp chuột:

           $ (selector) .click (function) 

        Tham số: < / strong> Phương thức này chấp nhận một tham số hàm là tùy chọn. Nó chỉ định hàm để chạy khi sự kiện nhấp chuột xảy ra.

        Ví dụ 1: Ví dụ này đặt sự kiện onClick bằng cách sử dụng click () phương pháp cho mỗi nút, Khi nút được nhấp, ID của nút được chuyển đến hàm và sau đó in ID trên màn hình.

        < / p>

        & lt;! LOẠI TÀI LIỆU HTML & gt;

        & lt; html & gt;

        & lt; head & gt;

        & lt; title & gt;

        Lấy ID của nút được nhấp

        sử dụng jQuery

        & lt; / title < code class = "trơn"> & gt;

        & lt; script src =

        " https://ajax.googleapis.com/ajax/ libs / jquery / 3.4.0 / jquery.min.js " & gt;

        & lt; / script & gt;

        & lt; / head & gt;

        & lt; body style = "text-align: center;" & gt;

        & lt; h1 style = "color: green;" & gt;

        GeeksForGeeks

        < p class = "line number18 index17 alt1"> & lt; / h1 & gt;

        & lt; p id = "GFG_UP" style =

        "font-size: 15px; font-weight: bold;" & gt;

        & lt; / p & gt;

        & lt; nút id = < code class = "string"> "1" & gt; Nút 1 & lt; / nút & gt;

        & lt; nút id < / code> = "2" & gt; Nút2 & lt; / nút & gt;

        < code class = "undefined space"> & lt; nút id = "3" & gt; Nút3 & lt; / nút & gt;

        < code class = "undefined space">

        & lt; p id = "GFG_DOWN" style =

        < code class = "undefined space"> "color: green; font-size: 20px; font-weight: bold;" & gt;

        & lt; / < code class = "keyword"> p & gt;

        & lt; script & gt;

        $ ('# GFG_UP' ) .text ("Nhấp vào nút để lấy ID");

        $ ("button"). click (function () {

        var t = $ (this) .attr ('id ');

        $ (' # GFG_DOWN ' ) .text ("ID =" + t);

        });

        & lt; / script & gt;

        & lt; / body & gt;

        & lt; / html & gt;

         
          

        Đầu ra:

        • Trước khi nhấp vào nút:
          • Sau khi nhấp vào nút:

          Ví dụ 2: Ví dụ này đặt sự kiện onClick bằng cách sử dụng phương thức on () cho mỗi nút, Khi nút được nhấp, ID của nút được chuyển tới hàm và sau đó in ID trên màn hình.


          < p>

          & lt;! DOCTYPE HTML & gt;

          & lt; html & gt;

          & lt; head & gt;

          & lt; title & gt;

          Lấy ID của nút được nhấp

          sử dụng jQuery

          & lt; / title & gt ;

          & lt; script src =

          " https://ajax.googleapis.com/ajax/libs/jquery/3.4.0/ jquery.min.js " & gt;

          & lt; / script & gt;

          & lt; / head & gt;

          & lt; body style = "text-align: center;" & gt;

          < / code> & lt; h1 style = "color: green;" & gt;

          GeeksForGeeks

          < p class = "line number18 index17 alt1"> & lt; / h1 & gt;

          & lt; p id = "GFG_UP" style =

          "font-size: 15px; font-weight: bold;" & gt;

          & lt; / p & gt;

          & lt; nút id = < code class = "string"> "1" & gt; Nút 1 & lt; / nút & gt;

          < code class = "undefined space"> & lt; nút id = "2" & gt; Nút2 & lt; / nút & gt;

          < code class = "undefined space"> & lt; nút id = "3" & gt; Nút3 & lt; / nút & gt;

          < code class = "undefined space">

          & lt; p id = "GFG_DOWN" style =

          < code class = "undefined space"> "color: green; font-size: 20px; font-weight: bold;" & gt;

          & lt; / < code class = "keyword"> p & gt;

          & lt; script & gt;

          $ ('# GFG_UP'). Text ("Nhấp vào nút để lấy ID");

          $ ("button"). on ( 'click', function () {

          var t = (this.id);

          $ ('#GFG_DOWN'). Text ("ID =" + t);

          });

          & lt; / script & gt;

          & lt; / body & gt;

          & lt; / html & gt;

           
            

          Đầu ra:

          • Trước khi nhấp vào nút:
            • Sau khi nhấp vào nút:

            jQuery là một thư viện JavaScript mã nguồn mở đơn giản hóa các tương tác giữa một tài liệu HTML / CSS, Nó nổi tiếng rộng rãi với triết lý “Viết ít hơn, làm nhiều hơn” .
            Bạn có thể học jQuery từ đầu bằng cách làm theo Hướng dẫn jQuery Ví dụ về jQuery .

            Ghi chú cá nhân của tôi


Xem thêm những thông tin liên quan đến chủ đề đối tượng htmlbuttonelement lấy id

cách lấy link và id bài viết để tăng like cmt

alt

  • Tác giả: Sang online
  • Ngày đăng: 2022-06-10
  • Đánh giá: 4 ⭐ ( 6332 lượt đánh giá )
  • Khớp với kết quả tìm kiếm: các bạn muốn tăng like follow liên hệ cho mình nhẽin chân thành cảm ơn.
    facebook: https://www.facebook.com/profile.php?id=100030872781494
    zalo: 0911157630
    link web: https://subpro47.biz

onClick to get the ID of the clicked button

  • Tác giả: stackoverflow.com
  • Đánh giá: 4 ⭐ ( 5862 lượt đánh giá )
  • Khớp với kết quả tìm kiếm:

[Selenium Java] Bài 5: Cách xác định Locators của Element trên website

  • Tác giả: anhtester.com
  • Đánh giá: 5 ⭐ ( 4828 lượt đánh giá )
  • Khớp với kết quả tìm kiếm: Bài này mình xác định Locators của element trên website, phần rất quan trọng trước khi bước vào tìm hiểu những câu lệnh trong Selenium.

Đối tượng và lớp (class) trong Java

  • Tác giả: vietjack.com
  • Đánh giá: 3 ⭐ ( 4227 lượt đánh giá )
  • Khớp với kết quả tìm kiếm: Đối tượng và lớp (class) trong Java - Học Java cơ bản và nâng cao cho người mới học về Ngôn ngữ hướng đối tượng, Ví dụ Java, Phương thức, Ghi đè, Tính kế thừa, Tính trừu tượng, Tính đa hình, Overriding, Inheritance, Polymorphism, Interfaces, Packages, Collections, Lập trình mạng, Đa luồng, Tuần tự hóa, Networking, Multithreading, Generics, Multimedia, Serialization, GUI.

KIỂM THỬ TỰ ĐỘNG VỚI SELENIUM WEBDRIVER: KIỂM THỬ CHỨC NĂNG MUA HÀNG ONLINE – PLT SOLUTIONS

  • Tác giả: dayhoc.pltpro.net
  • Đánh giá: 5 ⭐ ( 7515 lượt đánh giá )
  • Khớp với kết quả tìm kiếm:

Hướng dẫn sử dụng iTarget để lấy ID/Email đối tượng tiềm năng

  • Tác giả: kinhdoanhtenmiennhanh.blogspot.com
  • Đánh giá: 3 ⭐ ( 7781 lượt đánh giá )
  • Khớp với kết quả tìm kiếm:

Thao tác với đối tượng (Object) trong Javascript

  • Tác giả: freetuts.net
  • Đánh giá: 4 ⭐ ( 9700 lượt đánh giá )
  • Khớp với kết quả tìm kiếm: Thao tác với đối tượng (Object) trong Javascript, thực hiện các thao tác với đối tượng sinh viên truy xuất các phần tử hàm của đối tượng

Xem thêm các bài viết khác thuộc chuyên mục: Kiến thức lập trình

Xem Thêm  Làm thế nào để chuyển đổi một chuỗi thành một số trong JavaScript - chuyển đổi chuỗi thành số javascript

By ads_php