Hướng dẫn can we do calculations in html? - chúng ta có thể thực hiện các phép tính trong html không?

Nó thường được yêu cầu để tạo một biểu mẫu trực tuyến có thể tính toán tổng số. Dưới đây là một hình thức tính toán HTML đơn giản, nó được cấu trúc giống như một hình thức hóa đơn để bạn có thể sao chép và điều chỉnh. Lưu ý rằng, đơn giản là có nghĩa là dễ hiểu là dễ hiểu. Vì vậy, tôi đã tránh mọi cám dỗ để làm mã nhỏ nhất. Ngoài ra, mã sử dụng một số jQuery để thực hiện tính toán

Dưới đây là một hình thức tính toán mẫu. Hãy thử vào trường số lượng. Nó sẽ tự động cập nhật tổng số. Lưu ý rằng giá mặt hàng được tính toán và có thể thay đổi.

Xem Biểu mẫu tính toán HTML đơn giản trên Codepen.

Mã HTML (hàng)

<div class="row">
    <div class="col-6">
        1. Powdered white sugar (cups)
    div>
    <div class="col-3">
        <input type="number" value="0" class="qty" id="qty_sugar" />
    div>
    <div class="col-2">
        <input type="number" readonly value="0" id="price_sugar" />
    div>
div>

Mã HTML ở trên tạo ra một hàng ở dạng hóa đơn. Lưu ý các thuộc tính ID của các trường số lượng và đơn giá.

Phần còn lại của các hàng được thêm vào tương tự chỉ ID của các trường được thay đổi

Bây giờ chúng ta hãy xem số học đằng sau tính toán này: Người dùng chỉ có thể nhập số lượng của các mục. Chúng tôi tính giá của mỗi mục bằng cách nhân:

Qty × Unit_price

Tất cả những gì chúng ta cần làm là viết mã JavaScript tính toán tổng số. Lưu ý rằng mã này sử dụng thư viện JavaScript có tên là JQuery. jQuery làm cho mã này dễ hiểu hơn một chút

function calculateTotal()
{
  let unit_price={
    sugar: 22,
    butter: 12,
    eggs: 2,
    vanilla:43    
  };
  let item_price={}
  
  item_price.sugar = ($("#qty_sugar").val() * unit_price.sugar )
  $("#price_sugar").val(item_price.sugar);
  
  ...
  ...
  
}

Mã này $("#qty_sugar").val() nhận được giá trị của trường với ID Qty_Sugar CODDE $("#qty_sugar").val() * unit_price.sugar có nghĩa là nhân giá trị của qty_sugar với giá đường (khởi tạo ở trên). Biểu tượng * được sử dụng để nhân trong JavaScript.

Dòng mã này: $("#price_sugar").val(item_price.sugar); đặt kết quả nhân lên trường price_sugar.

Số lượng * giá trị giá được tính tương tự cho các trường còn lại.

Sau đó, chúng tôi chỉ cần thêm tất cả các kết quả nhân để tìm tổng số.

  let total = item_price.sugar + item_price.butter + item_price.eggs + item_price.vanilla;

Cuối cùng, chúng tôi đã đặt giá trị của tổng số người dùng bằng cách sử dụng mã này:

$("#total_value").text(total);

Nhưng, làm thế nào để tính toán chạy mỗi khi bạn chỉnh sửa số lượng? Vì điều đó, chúng tôi phải xử lý các sự kiện ”

Xử lý sự kiện

Mã bên dưới nối các sự kiện thay đổi và bàn phím cho tất cả các trường với thuộc tính lớp qty sau đó nó chạy chức năng tính toán. Vì vậy, đối với mỗi bản cập nhật, biểu mẫu tính toán tổng số và hiển thị cho bạn!

$(function()
 {
    $(".qty").on("change keyup",calculateTotal)
})

Tùy chỉnh

Để thêm các mặt hàng của bạn, hãy tìm kiếm một trong các mục ở dạng hiện tại (ví dụ như đường Sugar Sugar) sau đó thử thay đổi nó. Một khi bạn đã thực hiện các thay đổi, bạn sẽ có ý tưởng về cách các thay đổi ảnh hưởng đến hoạt động của biểu mẫu.

Xem thêm

• Tuổi toán mã HTML cho trang web