Hướng dẫn về Nút JavaScript. Ở đây chúng ta cũng thảo luận về cú pháp của nút javascript cùng với các ví dụ khác nhau và cách triển khai mã của nó.

Bạn đang xem : tạo một nút trong js

Nút JavaScript

Giới thiệu về Nút JavaScript

Nút JavaScript là một trong những phần tử JavaScript mang lại hiệu ứng cho các trang web. Các nút JavaScript mang lại giao diện tốt cho trang web. Các nút JavaScript này có thể được sử dụng để gửi dữ liệu hoặc nhận dữ liệu, kích hoạt các sự kiện nhấp chuột hoặc thay đổi màu sắc hoặc văn bản, v.v. Thẻ HTML & lt; nút & gt; được sử dụng trong các khung JavaScript xác định một nút có thể nhấp. Mỗi khi một nút được hiển thị trên trang web, một sự kiện sẽ được kích hoạt để thực hiện một chức năng. Chúng tôi sẽ xem xét việc tạo các nút JavaScript bằng cách sử dụng createElement () và cũng bằng cách sử dụng thẻ HTML được sử dụng cho các khung JavaScript.

Cú pháp:

Bắt đầu khóa học phát triển phần mềm miễn phí của bạn

Phát triển web, ngôn ngữ lập trình, Kiểm tra phần mềm & amp; những người khác

Sử dụng nút & lt; & gt; Thẻ HTML cho các Nút JavaScript

& lt; button onclick = "sampleFunction ()" & gt; Văn bản Mẫu & lt; / button & gt;

Trên đây là cú pháp thường được sử dụng trong các Khung JavaScript như ReactJs, AngularJs, v.v.

varsampleButton = document.createElement (btn);

Trên đây là Cú pháp JavaScript thuần túy được sử dụng để tạo một nút JavaScript.

Ví dụ về Nút JavaScript

Xem các ví dụ dưới đây để biết Cách tạo các nút JavaScript?

Ví dụ # 1

Tạo Nút JavaScript bằng & lt; nút & gt; thẻ

Mã:

& lt;! DOCTYPE html & gt;
& lt; html & gt;
& lt; body & gt;
& lt; h3 & gt; Tạo Nút JavaScript bằng thẻ HTML & lt; / h3 & gt;
& lt; p & gt; Vì không có chức năng hoặc bất kỳ sự kiện nào được liên kết, nút nhấp sẽ không hoạt động & lt; / p & gt;
& lt; button type = "button" id = "btn" & gt; Nhấp vào đây! & lt; / button & gt;
& lt; p id = "samplebtn" & gt; & lt; / p & gt;
& lt; script & gt;
& lt; / script & gt;
& lt; / body & gt;
& lt; / html & gt;

Đầu ra:

Vì vậy, ở đây trong ví dụ trên, chúng tôi chỉ tạo một nút bằng HTML & lt; button & gt; thẻ với một id. Việc nhấp sẽ không hoạt động vì không có trình xử lý sự kiện hoặc chức năng áp dụng.

Ví dụ # 2

Thêm Sự kiện nhấp chuột vào nút.

Mã:

Xem Thêm  Google Java Style Guide - static method trong java

& lt;! DOCTYPE html & gt;
& lt; html & gt;
& lt; body & gt;
& lt; h3 & gt; Thêm trình xử lý sự kiện onClick cho Nút JavaScript & lt; / h3 & gt;
& lt; p & gt; Nhấp vào bên dưới để xem chức năng onClick & lt; / p & gt;
& lt; button type = "button" id = "btn" onclick = "sampleClick ()" & gt; Nhấp vào Đây! & lt; / button & gt;
& lt; p id = "samplebtn" & gt; & lt; / p & gt;
& lt; script & gt;
function sampleClick () {
varbtnX = document.getElementById ("btn");
btnX.disabled = true;
}
& lt; / script & gt;
& lt; / body & gt;
& lt; / html & gt;

Đầu ra:

Khi nhấp vào,

Trong ví dụ trên, chúng tôi đang sử dụng chức năng onClick để tắt nút. . Disabled là phương pháp giúp nút tắt và việc nhấp vào sẽ không hoạt động.

Ví dụ # 3

onNhấp vào nút để hiển thị văn bản.

Mã:

& lt;! DOCTYPE html & gt;
& lt; html & gt;
& lt; body & gt;
& lt; h3 & gt; onClick sự kiện trên Nút JavaScript để hiển thị văn bản & lt; / h3 & gt;
& lt; p & gt; Phần tử JavaScript kích hoạt chức năng onClick & lt; / p & gt;
& lt; nút onclick = "clickText ()" & gt; Nhấp để hiển thị văn bản & lt; / button & gt;
& lt; p id = "btn" & gt; & lt; / p & gt;
& lt; script & gt;
hàm clickText () {
document.getElementById ("btn"). innerHTML = "Bạn đã nhấp vào nút JavaScript";
}
& lt; / script & gt;
& lt; / body & gt;
& lt; / html & gt;

Đầu ra:

Khi nhấp vào,

Ví dụ # 4

Mã:

& lt;! DOCTYPE html & gt;
& lt; html & gt;
& lt; đầu & gt;
& lt; phong cách & gt;
nội dung {
text-align: left;
}
/ * Tạo kiểu cho lớp btn1 * /
.btn1 {
màu nền: # 4FFF8A;
}
/ * Tạo kiểu cho id = htmbtn1 * /
# htmlbtn1 {
font-weight: bold;
}
/ * Tạo kiểu cho id = htmlbtn2 * /
# htmlbtn2 {
font-style: italic;
}
/ * Tạo kiểu cho id = jsbtn * /
#jsbtn {
font-weight: bold;
font-style: italic;
}
& lt; / style & gt;
& lt; / head & gt;
& lt; body & gt;
& lt; h3 & gt; Nút JavaScript: & lt; / h3 & gt;
& lt; button id = 'htmlbtn1' class = 'btn1' & gt; Tôi là nút HTML 1! & lt; / button & gt;
& lt; button id = 'htmlbtn2' class = 'btn1' & gt; Tôi là nút HTML 2! & lt; / button & gt;
& lt; script & gt;
/ * Tạo phần tử nút javascript * /
varclickBtn = document.createElement ('btn1');
/ * Đặt nhãn văn bản của nút * /
clickBtn.innerHTML = 'Nút JavaScript!';
/ * Đặt id của nút * /
clickBtn.id = 'jsbtn';
/ * Đặt lớp kiểu của nút * /
clickBtn.className = 'btn1';
/ * Thêm nút vào trang html * /
document.body.appendChild (clickBtn);
/ * Lấy phần tử có id = 'htmlbtn2' * /
varhtmlbtn = document.getElementById ('htmlbtn2');
/ * Sửa đổi nhãn văn bản cho htmlbtn2 * /
htmlbtn.innerHTML = 'Nút HTML được sửa đổi 2!';
& lt; / script & gt;
& lt; / body & gt;
& lt; / html & gt;

Đầu ra:

Hãy cùng chúng tôi xem qua mã để hiểu theo cách tốt hơn nhiều,

  • Tạo một nút JavaScript bằng cách sử dụng

document.createElement (‘btn1’); tạo đối tượng nút có thể nhấp và được tham chiếu là ‘clickBtn’

  • innerHTML giúp thiết lập nội dung bên trong, còn được gọi là nhãn.
  • id = ‘jsbtn’, đặt Id nút
  • className = ‘btn1’, đặt CSS tạo kiểu cho các nút
  • body.appendChild (clickBtn) giúp thêm clickBtn vào phần nội dung của tài liệu khi còn nhỏ.
Xem Thêm  Cây hoa xanh thơm ngào ngạt là "siêu dược liệu", nấu cách này càng bổ dưỡng - cách làm tinh dầu cà rốt

Khi trang hiển thị, chúng tôi thấy tất cả ba nút có kiểu nền từ lớp btn1, mỗi nút cũng có các kiểu phông chữ khác nhau cụ thể cho id.

Ban đầu, nhãn văn bản cho htmlbtn2 là “Tôi là nút HTML 2!”, chúng tôi đã sử dụng JavaScript và đã sửa đổi nhãn văn bản thành “Nút HTML được sửa đổi 2!”.

Ví dụ # 5

Mã:

& lt;! DOCTYPE html & gt;
& lt; html & gt;
& lt; body & gt;
& lt; h2 & gt; onClick vào nút sự kiện để bật lên & lt; / h2 & gt;
& lt; p & gt; Nhấp vào nút để xem cửa sổ bật lên có văn bản & lt; / p & gt;
& lt; input type = "btn" value = "clickAlert" onclick = "alert ('Bạn đang thấy hộp Cảnh báo')" & gt;
& lt; / body & gt;
& lt; / html & gt;

Đầu ra:

Khi nhấp vào, bạn sẽ thấy một hộp cảnh báo,

Ví dụ # 6

Ngày và giờ hiển thị.

Mã:

& lt;! DOCTYPE html & gt;
& lt; html & gt;
& lt; body & gt;
& lt; h1 & gt; Hiển thị Dữ liệu và Thời gian & lt; / h1 & gt;
& lt; button type = "btn"
onclick = "document.getElementById ('demo'). innerHTML = Date ()" & gt;
Nhấp vào đây cho nút Ngày và Giờ & lt; / & gt;
& lt; p id = "demo" & gt; & lt; / p & gt;
& lt; / body & gt;
& lt; / html & gt;

Đầu ra:

Khi nhấp vào, chúng ta sẽ thấy Ngày và Giờ hiện tại,

Có nhiều trình xử lý Sự kiện khác có thể được áp dụng cho các nút JavaScript,

  • khi nhấp vào nút
  • khi di chuột qua nút
  • di chuột ra khỏi nút
  • khi gửi biểu mẫu / dữ liệu khi nhấp vào nút (Phương pháp đăng)
  • Truy xuất dữ liệu từ một nguồn (Phương thức lấy)
  • Xóa tiêu điểm khỏi nút
  • Áp dụng tiêu điểm vào nút
  • Tắt nút bằng cách sử dụng .disable
  • Về phương pháp thay đổi
  • và nhiều hơn nữa… ..

Kết luận

Với điều này, chúng ta sẽ kết thúc chủ đề “JavaScript button”. Chúng ta đã biết các nút JavaScript là gì và chúng được sử dụng như thế nào. Các cách khác nhau để mô tả nút, một là sử dụng JavaScript createElement () và một là sử dụng thẻ HTML & lt; button & gt ;. Đã liệt kê ra một số ví dụ với lời giải thích rõ ràng để bạn hiểu rõ hơn nhiều. Vì chúng tôi có nhiều phương pháp xử lý sự kiện áp dụng cho nút JavaScript, nên đã liệt kê một số. Bạn thậm chí có thể thử các sự kiện khác. Các nút JavaScript làm cho trang web trông thanh lịch hơn, vì hầu hết các trang web cơ bản đều có các nút với nhiều chức năng khác nhau.

Xem Thêm  Nối bằng Python - Cách nối vào một danh sách hoặc một mảng - thêm python vào danh sách

Các bài báo được đề xuất

Đây là hướng dẫn về Nút JavaScript. Ở đây chúng ta cũng thảo luận về phần giới thiệu và cú pháp của nút javascript cùng với các ví dụ khác nhau và cách triển khai mã của nó. Bạn cũng có thể xem các bài viết sau để tìm hiểu thêm –

0

Chia sẻ

Chia sẻ


Xem thêm những thông tin liên quan đến chủ đề tạo một nút trong js

Hướng dẫn làm nút Search bằng javaScript

alt

  • Tác giả: Quang Đăng
  • Ngày đăng: 2021-10-17
  • Đánh giá: 4 ⭐ ( 2745 lượt đánh giá )
  • Khớp với kết quả tìm kiếm: Nếu có gì không hiểu ae cứ ib trực tiếp cho minh trên face nhá
    facebook :https://www.facebook.com/TruongquangdangJapan
    Thank you mọi người và hẹn gặp lại .

Tạo Form đăng ký bằng JavaScript và thẻ input

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

Tạo ứng dụng máy tính bỏ túi bằng Javascript

  • Tác giả: www.niemvuilaptrinh.com
  • Đánh giá: 3 ⭐ ( 4559 lượt đánh giá )
  • Khớp với kết quả tìm kiếm: Xin chào các bạn quay lại blog của mình. Trong bài này mình sẽ giới thiệu cho các bạn xây dựng một ứng dụng máy tính bỏ túi bằng Javascript giúp các bạn có thể nắm rõ hơn và thực hành những thứ mình đã học về Javascript. Bây giờ hãy cùng nhau tìm hiểu nhé!

Bootstrap: Nút button.js

  • Tác giả: v1study.com
  • Đánh giá: 4 ⭐ ( 4393 lượt đánh giá )
  • Khớp với kết quả tìm kiếm: Nút button.js

Sử dụng thẻ input, button và textarea

  • Tác giả: hocjavascript.net
  • Đánh giá: 4 ⭐ ( 1116 lượt đánh giá )
  • Khớp với kết quả tìm kiếm: Thẻ input được sử dụng để tạo các trường giúp người dùng nhập thông tin vào. Có nhiều loại input khác nhau, trong đó phổ biến là:

Thẻ button trong HTML

  • Tác giả: freetuts.net
  • Đánh giá: 4 ⭐ ( 2244 lượt đánh giá )
  • Khớp với kết quả tìm kiếm: Cách sử dụng Thẻ button trong HTML, Thẻ html button sẽ tạo ra một nút bấm, nó không tạo ra một hành động submit form như thẻ input type = submit

Tạo Form đăng ký bằng Javascript

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

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

By ads_php