Tôi đã thiết lập một máy tính bổ sung javascript đơn giản trả về giá trị bên dưới. Những gì tôi đang cố gắng làm là sau đó lấy giá trị đó và sau đó tự động tính ra 20 % VAT của giá trị đó rồi cộng hai giá trị này ( tổng & vat ) lại với nhau để tạo thành một tổng lớn
<script>
var numOne = document.getElementById('num-one');
var numTwo = document.getElementById('num-two');
var addSum = document.getElementById('add-sum');
var numVat = document.getElementById('add-vat');
var numTotal = document.getElementById('total');
numOne.addEventListener('input', add);
numTwo.addEventListener('input', add);
addSum.addEventListener(total);
numVat.addEventListener(total);
function add() {
var one = parseFloat(numOne.value) || 0;
var two = parseFloat(numTwo.value) || 0;
addSum.innerText = one + two;
}
function total() {
var three = parseFloat(addSum.value) || 0;
var four = parseFloat(numVat.value) || 0;
total.innerText = three + four;
}
//this is to work out vat but I'm not sure how to integrate it
function percentage(partialValue, totalValue) {
return (100 * partialValue) / totalValue;
}
</script>
bất kì sự trợ giúp nào đều được đánh giá cao. )
Điều tra bảng điều khiển trình duyệt, tôi thấy
// addSum.addEventListener(total);
// numVat.addEventListener(total);
function add() {
...
total();
}
0
Trước tiên, hãy xử lý vấn đề đó bằng cách loại bỏ các trình xử lý sự kiện đó và gọi hàm tổng từ phần cuối của phần bổ sung
// addSum.addEventListener(total);
// numVat.addEventListener(total);
function add() {
...
total();
}
Bạn cũng có một hàm tỷ lệ phần trăm không được sử dụng và dường như không đưa ra tỷ lệ phần trăm. Vì VAT là 20%, bạn có thể nhân với 0. 20 để có được số tiền đó
Sau đó, chúng ta có thể sử dụng hàm getVat đó từ bên trong hàm tổng
function total() {
numVat.value = getVat(addSum.value);
var three = parseFloat(addSum.value) || 0;
var four = parseFloat(numVat.value) || 0;
total.innerText = three + four;
}
Nhưng điều đó không hiệu quả. Tại sao không?
Đó là addSum và numVat không tốt. Chúng không sử dụng thuộc tính giá trị vì chúng không phải là trường đầu vào. Thay vào đó, có thể sử dụng InternalText
function total() {
numVat.value = getVat(addSum.innerText);
var three = parseFloat(addSum.innerText) || 0;
var four = parseFloat(numVat.innerText) || 0;
total.innerText = three + four;
}
Điều đó hiện đang hoạt động, nhưng dẫn đến nhiều điểm thập phân cho VAT, chẳng hạn như
// addSum.addEventListener(total);
// numVat.addEventListener(total);
function add() {
...
total();
}
1. Để khắc phục điều đó, chúng ta không nên hạn chế số thập phân khi tính giá trị. Thay vào đó, chỉ khi nó được hiển thị trên màn hình, chúng ta mới nên tác động đến các giá trị thập phân
Chúng ta có thể cập nhật hàm tổng để sử dụng phương thức toFixed để đạt được điều đó
________số 8_______
Vấn đề cuối cùng là tại sao tổng số không được cập nhật và đó là vì
// addSum.addEventListener(total);
// numVat.addEventListener(total);
function add() {
...
total();
}
2 không phải là tham chiếu đến phần tổng số trên trang. Thay vào đó, nó là
// addSum.addEventListener(total);
// numVat.addEventListener(total);
function add() {
...
total();
}
Bây giờ mã đã hoạt động, đó không phải là kết thúc của quá trình. Chúng ta nên để mã tốt hơn chúng ta đã tìm thấy nó
Chúng ta có thể sử dụng mỹ phẩm. io để xóa định dạng của mã, sau đó chạy mã thông qua jslint. com để tìm các vấn đề rõ ràng
Dấu ngoặc kép được ưu tiên cho chuỗi thay vì dấu ngoặc đơn
Tiếp theo là mã ngoài phạm vi xảy ra. Đó là nơi một chức năng được sử dụng trước khi nó được khai báo
Và JSLint hiện đang hài lòng với mã đó
function calcVat(amount) {
return amount * 0.20;
}
function total() {
var vat = calcVat(addSum.innerText);
numVat.innerText = Number(vat).toFixed(2);
var three = parseFloat(addSum.innerText) || 0;
var four = parseFloat(numVat.innerText) || 0;
numTotal.innerText = Number(three + four).toFixed(2);
}
function add() {
var one = parseFloat(numOne.value) || 0;
var two = parseFloat(numTwo.value) || 0;
addSum.innerText = one + two;
total();
}
var numOne = document.getElementById("num-one");
var numTwo = document.getElementById("num-two");
var addSum = document.getElementById("add-sum");
var numVat = document.getElementById("add-vat");
var numTotal = document.getElementById("total");
numOne.addEventListener("input", add);
numTwo.addEventListener("input", add);
Đó không phải là kết thúc mặc dù
Tên chức năng thường phải ở dạng động từ-danh từ. Ví dụ:
// addSum.addEventListener(total);
// numVat.addEventListener(total);
function add() {
...
total();
}
4,
// addSum.addEventListener(total);
// numVat.addEventListener(total);
function add() {
...
total();
}
5,
// addSum.addEventListener(total);
// numVat.addEventListener(total);
function add() {
...
total();
}
6. Vì vậy, tôi sẽ đổi tên các chức năng để theo sát các ví dụ đó hơn
Trong hàm calcTotal, tên biến
// addSum.addEventListener(total);
// numVat.addEventListener(total);
function add() {
...
total();
}
7 và
// addSum.addEventListener(total);
// numVat.addEventListener(total);
function add() {
...
total();
}
8 là những cái tên khá khủng khiếp. Thay vì sử dụng những tên đó, chúng ta có thể làm rõ khi bắt đầu hàm rằng đó là tổng và thùng mà chúng ta đang sử dụng
function total() {
var sum = parseFloat(addSum.innerText);
var vat = calcVat(sum);
numVat.innerText = Number(vat).toFixed(2);
numTotal.innerText = Number(sum + vat).toFixed(2);
}
Ngoài ra, nó gây ra nhiều vấn đề hơn khi các chức năng tiếp cận để thay đổi những thứ khác. Để tránh những rắc rối đó, tốt nhất là các hàm nhận thông tin làm đối số cho hàm
<script>
var numOne = document.getElementById('num-one');
var numTwo = document.getElementById('num-two');
var addSum = document.getElementById('add-sum');
var numVat = document.getElementById('add-vat');
var numTotal = document.getElementById('total');
numOne.addEventListener('input', add);
numTwo.addEventListener('input', add);
addSum.addEventListener(total);
numVat.addEventListener(total);
function add() {
var one = parseFloat(numOne.value) || 0;
var two = parseFloat(numTwo.value) || 0;
addSum.innerText = one + two;
}
function total() {
var three = parseFloat(addSum.value) || 0;
var four = parseFloat(numVat.value) || 0;
total.innerText = three + four;
}
//this is to work out vat but I'm not sure how to integrate it
function percentage(partialValue, totalValue) {
return (100 * partialValue) / totalValue;
}
</script>
0
Tổng chức năng bây giờ có thể dễ dàng nhìn thấy để làm ba việc lớn. Một là lấy giá trị từ các phần tử, một là tính tổng và hai là cập nhật tổng. Các chức năng có xu hướng ổn định hơn khi bạn tách những thứ khác nhau đó thành các chức năng riêng biệt
Tuy nhiên, tôi không muốn có một chức năng riêng biệt để cập nhật từng giá trị, vì điều đó có vẻ hơi quá. Thay vào đó, tôi sẽ sử dụng một hàm nhận hai đối số - vị trí để cập nhật và giá trị để cập nhật nó. Tôi đã gọi nó là
// addSum.addEventListener(total);
// numVat.addEventListener(total);
function add() {
...
total();
}
9 để giúp làm rõ rằng nó đang hiển thị các giá trị đến hai chữ số thập phân
<script>
var numOne = document.getElementById('num-one');
var numTwo = document.getElementById('num-two');
var addSum = document.getElementById('add-sum');
var numVat = document.getElementById('add-vat');
var numTotal = document.getElementById('total');
numOne.addEventListener('input', add);
numTwo.addEventListener('input', add);
addSum.addEventListener(total);
numVat.addEventListener(total);
function add() {
var one = parseFloat(numOne.value) || 0;
var two = parseFloat(numTwo.value) || 0;
addSum.innerText = one + two;
}
function total() {
var three = parseFloat(addSum.value) || 0;
var four = parseFloat(numVat.value) || 0;
total.innerText = three + four;
}
//this is to work out vat but I'm not sure how to integrate it
function percentage(partialValue, totalValue) {
return (100 * partialValue) / totalValue;
}
</script>
1
Chức năng addProducts là nơi diễn ra quá trình dọn dẹp cuối cùng của chúng tôi
<script>
var numOne = document.getElementById('num-one');
var numTwo = document.getElementById('num-two');
var addSum = document.getElementById('add-sum');
var numVat = document.getElementById('add-vat');
var numTotal = document.getElementById('total');
numOne.addEventListener('input', add);
numTwo.addEventListener('input', add);
addSum.addEventListener(total);
numVat.addEventListener(total);
function add() {
var one = parseFloat(numOne.value) || 0;
var two = parseFloat(numTwo.value) || 0;
addSum.innerText = one + two;
}
function total() {
var three = parseFloat(addSum.value) || 0;
var four = parseFloat(numVat.value) || 0;
total.innerText = three + four;
}
//this is to work out vat but I'm not sure how to integrate it
function percentage(partialValue, totalValue) {
return (100 * partialValue) / totalValue;
}
</script>
2
Biến một và hai có thể được đổi tên để rõ ràng hơn thành
<script>
var numOne = document.getElementById('num-one');
var numTwo = document.getElementById('num-two');
var addSum = document.getElementById('add-sum');
var numVat = document.getElementById('add-vat');
var numTotal = document.getElementById('total');
numOne.addEventListener('input', add);
numTwo.addEventListener('input', add);
addSum.addEventListener(total);
numVat.addEventListener(total);
function add() {
var one = parseFloat(numOne.value) || 0;
var two = parseFloat(numTwo.value) || 0;
addSum.innerText = one + two;
}
function total() {
var three = parseFloat(addSum.value) || 0;
var four = parseFloat(numVat.value) || 0;
total.innerText = three + four;
}
//this is to work out vat but I'm not sure how to integrate it
function percentage(partialValue, totalValue) {
return (100 * partialValue) / totalValue;
}
</script>
3
Chúng tôi cũng có thể sử dụng updateDollarText trên tổng
<script>
var numOne = document.getElementById('num-one');
var numTwo = document.getElementById('num-two');
var addSum = document.getElementById('add-sum');
var numVat = document.getElementById('add-vat');
var numTotal = document.getElementById('total');
numOne.addEventListener('input', add);
numTwo.addEventListener('input', add);
addSum.addEventListener(total);
numVat.addEventListener(total);
function add() {
var one = parseFloat(numOne.value) || 0;
var two = parseFloat(numTwo.value) || 0;
addSum.innerText = one + two;
}
function total() {
var three = parseFloat(addSum.value) || 0;
var four = parseFloat(numVat.value) || 0;
total.innerText = three + four;
}
//this is to work out vat but I'm not sure how to integrate it
function percentage(partialValue, totalValue) {
return (100 * partialValue) / totalValue;
}
</script>
4
Khi chúng tôi thêm các sản phẩm, có ba điều chính được thực hiện. Một là cập nhật tổng số exVat, một là cập nhật tổng số vat, và hai là cập nhật tổng số chung
Bởi vì đó là cách chúng ta nghĩ về mọi thứ, sẽ hữu ích nếu mã phù hợp với cách chúng ta nghĩ về mọi thứ. Hàm addProducts chỉ nên có ba lệnh gọi hàm, mỗi lệnh khớp với các hoạt động được mô tả đó
Đây là mã cập nhật để cập nhật tổng số exVat
<script>
var numOne = document.getElementById('num-one');
var numTwo = document.getElementById('num-two');
var addSum = document.getElementById('add-sum');
var numVat = document.getElementById('add-vat');
var numTotal = document.getElementById('total');
numOne.addEventListener('input', add);
numTwo.addEventListener('input', add);
addSum.addEventListener(total);
numVat.addEventListener(total);
function add() {
var one = parseFloat(numOne.value) || 0;
var two = parseFloat(numTwo.value) || 0;
addSum.innerText = one + two;
}
function total() {
var three = parseFloat(addSum.value) || 0;
var four = parseFloat(numVat.value) || 0;
total.innerText = three + four;
}
//this is to work out vat but I'm not sure how to integrate it
function percentage(partialValue, totalValue) {
return (100 * partialValue) / totalValue;
}
</script>
5
Đây là mã để cập nhật thùng
<script>
var numOne = document.getElementById('num-one');
var numTwo = document.getElementById('num-two');
var addSum = document.getElementById('add-sum');
var numVat = document.getElementById('add-vat');
var numTotal = document.getElementById('total');
numOne.addEventListener('input', add);
numTwo.addEventListener('input', add);
addSum.addEventListener(total);
numVat.addEventListener(total);
function add() {
var one = parseFloat(numOne.value) || 0;
var two = parseFloat(numTwo.value) || 0;
addSum.innerText = one + two;
}
function total() {
var three = parseFloat(addSum.value) || 0;
var four = parseFloat(numVat.value) || 0;
total.innerText = three + four;
}
//this is to work out vat but I'm not sure how to integrate it
function percentage(partialValue, totalValue) {
return (100 * partialValue) / totalValue;
}
</script>
6
Và cuối cùng, calcTotal chúng ta sẽ thay thế bằng updateTotal
<script>
var numOne = document.getElementById('num-one');
var numTwo = document.getElementById('num-two');
var addSum = document.getElementById('add-sum');
var numVat = document.getElementById('add-vat');
var numTotal = document.getElementById('total');
numOne.addEventListener('input', add);
numTwo.addEventListener('input', add);
addSum.addEventListener(total);
numVat.addEventListener(total);
function add() {
var one = parseFloat(numOne.value) || 0;
var two = parseFloat(numTwo.value) || 0;
addSum.innerText = one + two;
}
function total() {
var three = parseFloat(addSum.value) || 0;
var four = parseFloat(numVat.value) || 0;
total.innerText = three + four;
}
//this is to work out vat but I'm not sure how to integrate it
function percentage(partialValue, totalValue) {
return (100 * partialValue) / totalValue;
}
</script>
7
Điều đó để lại cho chúng tôi một chức năng addProducts được cập nhật và sạch hơn nhiều
<script>
var numOne = document.getElementById('num-one');
var numTwo = document.getElementById('num-two');
var addSum = document.getElementById('add-sum');
var numVat = document.getElementById('add-vat');
var numTotal = document.getElementById('total');
numOne.addEventListener('input', add);
numTwo.addEventListener('input', add);
addSum.addEventListener(total);
numVat.addEventListener(total);
function add() {
var one = parseFloat(numOne.value) || 0;
var two = parseFloat(numTwo.value) || 0;
addSum.innerText = one + two;
}
function total() {
var three = parseFloat(addSum.value) || 0;
var four = parseFloat(numVat.value) || 0;
total.innerText = three + four;
}
//this is to work out vat but I'm not sure how to integrate it
function percentage(partialValue, totalValue) {
return (100 * partialValue) / totalValue;
}
</script>
8
Đây là mã được cập nhật đầy đủ, xử lý mọi thứ theo cách đơn giản như thực tế
<script>
var numOne = document.getElementById('num-one');
var numTwo = document.getElementById('num-two');
var addSum = document.getElementById('add-sum');
var numVat = document.getElementById('add-vat');
var numTotal = document.getElementById('total');
numOne.addEventListener('input', add);
numTwo.addEventListener('input', add);
addSum.addEventListener(total);
numVat.addEventListener(total);
function add() {
var one = parseFloat(numOne.value) || 0;
var two = parseFloat(numTwo.value) || 0;
addSum.innerText = one + two;
}
function total() {
var three = parseFloat(addSum.value) || 0;
var four = parseFloat(numVat.value) || 0;
total.innerText = three + four;
}
//this is to work out vat but I'm not sure how to integrate it
function percentage(partialValue, totalValue) {
return (100 * partialValue) / totalValue;
}
</script>
9
Lợi ích chính ở đây là mỗi chức năng đều đẹp và đơn giản, dễ hiểu và dễ cập nhật khi cần các tính năng bổ sung
Làm cách nào để tính tổng giá bằng JavaScript?
To do what you want, you need to first use const numOfadultInput = document. getElementById("num-adult") then do let numOfadult = numOfadultInput. value inside the function that does the calculation. Next, you need to add onchange or oninput listeners to your s so the total updates automatically.
Làm cách nào để tính chiết khấu trong JavaScript?
hàm tính() {
giá thay đổi = 40;
var giảm giá = 0;
var afterDiscount= 0;
/* giá = Số(tài liệu. máy tính chiết khấu. giá bán. giá trị);*/
numberOfMembers = Số(tài liệu. máy tính chiết khấu. giá trị);
giảm giá = Số (tài liệu. máy tính chiết khấu. chiết khấu. giá trị);
Làm cách nào để tạo một máy tính trong HTML?
Ví dụ về Máy tính sử dụng HTML.
Bạn có thể tính toán bằng HTML không?
Máy tính HTML được sử dụng để thực hiện các phép toán cơ bản như Cộng, trừ, nhân và chia . Bạn có thể tìm thấy bản xem trước trực tiếp bên dưới, hãy dùng thử. Để thiết kế máy tính cơ bản, chúng tôi sẽ sử dụng HTML, CSS và JavaScript. HTML được sử dụng để thiết kế cấu trúc cơ bản của máy tính.
