Tăng giảm trong html

Thử nó

cú pháp

x++
++x

Sự mô tả

Nếu sử dụng hậu tố, với toán tử đứng sau toán hạng (ví dụ: x++), toán tử gia tăng sẽ tăng và trả về giá trị trước khi tăng

Nếu sử dụng tiền tố, với toán tử đứng trước toán hạng (ví dụ: ++x), thì toán tử gia tăng sẽ tăng dần và trả về giá trị sau khi tăng dần

Toán tử gia tăng chỉ có thể được áp dụng trên toán hạng là tham chiếu (biến và thuộc tính đối tượng; i. e. mục tiêu phân công hợp lệ). Bản thân ++x ước tính thành một giá trị, không phải là tham chiếu, vì vậy bạn không thể xâu chuỗi nhiều toán tử gia số lại với nhau

Kiếm thu nhập với kỹ năng HTML của bạn

Đăng ký và chúng tôi sẽ gửi cho bạn những cơ hội làm việc tự do tốt nhất ngay trong hộp thư đến của bạn.
Chúng tôi đang xây dựng thị trường việc làm tự do lớn nhất dành cho những người như bạn.

Trong bài viết này, chúng ta sẽ thảo luận về cách xây dựng bộ đếm tăng và giảm khi nhấp vào nút. Nếu bạn đang xem xét chỉ thực hiện chức năng tăng, thì có thể bỏ qua mã giảm

Chúng tôi sẽ tạo một bộ đếm với các chức năng sau

1. Khởi tạo đếm thành 0 khi tải trang
2. Số lượng tăng thêm 1 khi nhấp vào nút
3. Số lần giảm đi 1 khi nhấp vào nút

Bộ đếm gia tăng JavaScript trên nhưng

Vui lòng bật JavaScript

1. Create for all the HTML elements

Đầu tiên, chúng ta cần thẻ div HTML cho các phần tử sau

1. Nút tăng. Vùng chứa HTML cho nút tăng với id “số lần tăng
2. Tổng số. Vùng chứa HTML nơi tổng số văn bản được hiển thị
3. nút giảm. Bộ chứa HTML cho nút giảm dần với id “số lần giảm

2. Thêm các nút hình ảnh HTML

Tiếp theo, chúng ta sẽ thêm hai nút cho cả tăng và giảm như sau

1. Nút hình ảnh có id là “up-arrow” và up_arrow. url hình ảnh png làm nguồn
2. Nút hình ảnh có id là “down-arrow” và up_arrow. url hình ảnh png làm nguồn

3. Khởi tạo đếm thành 0 khi tải trang

Số lượng cần được hiển thị là 0 khi trang được tải lần đầu tiên, điều này được thực hiện theo các bước sau

1. Truy cập vùng chứa HTML với id “total-count” bằng cách sử dụng bộ chọn DOM
2. Khai báo và khởi tạo biến đếm JS bằng 0
3. Gán giá trị biến đếm cho phần tử DOM đã chọn trước đó bên trongHTML

// Select total count
const totalCount = document.getElementById("total-count");

// Variable to track count
var count = 0;

// Display initial count value
totalCount.innerHTML = count;

4. Hàm JS cho chức năng Gia tăng

Hàm JS để xử lý số lượng tăng theo các bước sau

1. Tăng giá trị biến đếm lên 1
2. Gán giá trị biến đếm cho phần tử TotalCount DOM

// Function to increment count
const handleIncrement = () => {
  count++;
  totalCount.innerHTML = count;
};

5. Hàm JS cho chức năng Giảm

Hàm JS để xử lý giảm số đếm bằng các bước sau

1. Giảm giá trị biến đếm đi 1
2. Gán giá trị biến đếm cho phần tử TotalCount DOM

// Function to decrement count
const handleDecrement = () => {
  count--;
  totalCount.innerHTML = count;
};

6. Thêm sự kiện “nhấp chuột” vào các nút

Cuối cùng, chúng tôi cần cho phép người dùng kích hoạt chức năng JavaScript, chức năng này được triển khai theo các bước sau

Gia tăng trong HTML là gì?

Ngược lại với ++ trong Javascript là gì?

Bộ đếm gia số là gì?

Nếu bạn muốn tăng số nút đếm thì mã là gì?