javascript - 显示函数结果 JavaScript 的摘要
问题描述
我有输入来选择购买不同展览的不同门票（正常和折扣）的数量。一个展览的这些输入如下所示：
<input type="number" class="count" value="0" min="1" max="10" id="inputNumberSelect-light" oninput="priceLight()">
<input type="number" class="count ml-3" value="0" min="0" max="10" id="inputNumberDiscSelect-light" oninput="priceLightDisc()">
我借助函数分别计算每个输入的每个价格：
function priceLight() {
let amount_light = document.getElementById("inputNumberSelect-light").value;
let price_light = 40;
let total_light = amount_light * price_light;
document.getElementById("price__light_total").innerHTML = "Price: " + total_light + " zł";
};
function priceLightDisc() {
let amount_light_disc = document.getElementById("inputNumberDiscSelect-light").value;
let price_light_disc = 35;
let total_light_disc = amount_light_disc * price_light_disc;
document.getElementById("price__light_total_disc").innerHTML = "Price: " + total_light_disc + " zł";
};
每种类型的票的价格都显示在<span>带有相关 ID 的中。在下一步之前，一切正常。
然后我需要做一个总结，我需要在表格中显示与订单相关的其他信息。显示总价的地方跟一个id有关：
<td id="show__price_total"></td>
在那里，我遇到了总价的问题，它是priceLight()和的摘要priceLightDisc()。
我试图从每个函数返回结果，然后对它们求和，所以它看起来：
function priceLight() {
let amount_light = document.getElementById("inputNumberSelect-light").value;
let price_light = 40;
let total_light = amount_light * price_light;
document.getElementById("price__light_total").innerHTML = "Price: " + total_light + " zł";
let resultLight = total_light; //new lines
return resultLight; //new lines
};
function priceLightDisc() {
let amount_light_disc = document.getElementById("inputNumberDiscSelect-light").value;
let price_light_disc = 35;
let total_light_disc = amount_light_disc * price_light_disc;
document.getElementById("price__light_total_disc").innerHTML = "Price: " + total_light_disc + " zł";
let resultLight = total_light_disc; //new lines
return resultLight; //new lines
};
function resultLight(){
let result = (+priceLight()) + (+priceLightDisc());
document.getElementById("show__price_total").innerHTML = result;
return result;
}
console.log(resultLight())它正确显示了结果（也不是字符串，而是数字），但不显示结果。如何正确显示 2 个函数的摘要并成为动态的总价？
此外，还有 1 个问题，但有点小：
- 如何使每次展览从 2 个输入中选择不超过 10 张门票成为可能？现在可以从两个输入中选择 10 张票，但我需要使其总数不超过 10 张。
我会感谢每一个有用的评论。预先感谢您的每一个回复！
我添加了一个片段，希望它会清楚。
PS Js代码没有优化，因为我刚开始学习JavaScript。
/*Exhibition price count*/
function priceLight() {
let amount_light = document.getElementById("inputNumberSelect-light").value;
let price_light = 40;
let total_light = amount_light * price_light;
document.getElementById("price__light_total").innerHTML = "Price: " + total_light + " zł";
let resultLight = total_light;
return resultLight;
};
function priceLightDisc() {
let amount_light_disc = document.getElementById("inputNumberDiscSelect-light").value;
let price_light_disc = 35;
let total_light_disc = amount_light_disc * price_light_disc;
document.getElementById("price__light_total_disc").innerHTML = "Price: " + total_light_disc + " zł";
let resultLight = total_light_disc;
return resultLight;
};
function priceDark() {
let amount_dark = document.getElementById("inputNumberSelect-dark").value;
let price_dark = 30;
let total_dark = amount_dark * price_dark;
document.getElementById("price__dark_total").innerHTML = "Wartość: " + total_dark + " zł";
};
function priceDarkDisc() {
let amount_dark_disc = document.getElementById("inputNumberDiscSelect-dark").value;
let price_dark_disc = 25;
let total_dark_disc = amount_dark_disc * price_dark_disc;
document.getElementById("price__dark_total_disc").innerHTML = "Wartość: " + total_dark_disc + " zł";
};
function priceBoth() {
let amount_both = document.getElementById("inputNumberSelect-both").value;
let price_both = 60;
let total_both = amount_both * price_both;
document.getElementById("price__both_total").innerHTML = "Wartość: " + total_both + " zł";
};
function priceBothDisc() {
let amount_both_disc = document.getElementById("inputNumberDiscSelect-both").value;
let price_both_disc = 50;
let total_both_disc = amount_both_disc * price_both_disc;
document.getElementById("price__both_total_disc").innerHTML = "Wartość: " + total_both_disc + " zł";
};
/*Summary*/
function resultLight(){
let result = (+priceLight()) + (+priceLightDisc());
document.getElementById("show__price_total").innerHTML = result;
return result;
}<!DOCTYPE html>
<html lang="pl">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<title>Bilety</title>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@4.6.0/dist/css/bootstrap.min.css" integrity="sha384-B0vP5xmATw1+K9KRQjQERJvTumQW0nPEzvF6L/Z6nronJ3oUOFUFpCjEUQouq2+l" crossorigin="anonymous">
</head>
<body>
<div class="section__choice py-3">
<div class="container">
<div class="py-4 section__number_people">
<h2>Tickets</h2>
<!--tickets-light-->
<div class="section__number_qty py-3" id="tickets__light_qty">
<div class="row">
<div class="col-6">
<label for="inputNumberSelect">Amount of tickets</label>
<input type="number" class="count" value="0" min="1" max="10" id="inputNumberSelect-light" oninput="priceLight()">
</div>
<div class="col">
<p>Price per ticket:
<span>40</span>
zł
</p>
</div>
<div class="col">
<p>
<span id="price__light_total" class="numeric_value"></span>
</p>
</div>
</div>
<div class="row">
<div class="col-6">
<label for="inputNumberDiscSelect">Amount of tickets with discount</label>
<input type="number" class="count ml-3" value="0" min="0" max="10" id="inputNumberDiscSelect-light" oninput="priceLightDisc()">
</div>
<div class="col">
<p>Price per ticket:
<span>35</span>
zł
</p>
</div>
<div class="col">
<p>
<span id="price__light_total_disc" class="numeric_value"></span>
</p>
</div>
</div>
</div>
<!--tickets-dark-->
<div class="section__number_qty py-3" id="tickets__dark_qty">
<div class="row">
<div class="col-6">
<label for="inputNumberSelect">Amount of tickets</label>
<input type="number" class="count" name="Quantity_visitors" value="0" min="1" max="8" id="inputNumberSelect-dark" oninput="priceDark()">
</div>
<div class="col">
<p>Price per ticket:
<span>30</span>
zł
</p>
</div>
<div class="col">
<p>
<span id="price__dark_total"></span>
</p>
</div>
</div>
<div class="row">
<div class="col-6">
<label for="inputNumberDiscSelect">Amount of tickets with discount</label>
<input type="number" class="count ml-3" name="Quantity_visitors_disc" value="0" min="0" max="10" id="inputNumberDiscSelect-dark" oninput="priceDarkDisc()">
</div>
<div class="col">
<p>Price per ticket:
<span>25</span>
zł
</p>
</div>
<div class="col">
<p>
<span id="price__dark_total_disc"></span>
</p>
</div>
</div>
</div>
<!--tickets-both-->
<div class="section__number_qty py-3" id="tickets__both_qty">
<div class="row">
<div class="col-6">
<label for="inputNumberSelect">Amount of tickets</label>
<input type="number" class="count" name="Quantity_visitors" value="0" min="1" max="10" id="inputNumberSelect-both" oninput="priceBoth()">
</div>
<div class="col">
<p>Price per ticket:
<span>60</span>
zł
</p>
</div>
<div class="col">
<p>
<span id="price__both_total"></span>
</p>
</div>
</div>
<div class="row">
<div class="col-6">
<label for="inputNumberDiscSelect">Amount of tickets with discount</label>
<input type="number" class="count ml-3" name="Quantity_visitors_disc" value="0" min="0" max="10" id="inputNumberDiscSelect-both" oninput="priceBothDisc()">
</div>
<div class="col">
<p>Price per ticket:
<span>50</span>
zł
</p>
</div>
<div class="col">
<p>
<span id="price__both_total_disc"></span>
</p>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="container section__summary_options py-3">
<div class="container">
<div class="row">
<div class="summary__data">
<h2 class="summary__title pb-3">
Summary:
</h2>
<table class="table table-dark py-3">
<thead>
<tr>
<th scope="col">Date</th>
<th scope="col">Exh</th>
<th scope="col">Lang</th>
<th scope="col">Normal tickets</th>
<th scope="col">Tickets with disc</th>
<th scope="col">Total</th>
</tr>
</thead>
<tbody>
<tr>
<th id="show__date"></th>
<td id="show__exh"></td>
<td id="show__language"></td>
<td id="show__number"></td>
<td id="show__number_disc"></td>
<td id="show__price_total"></td>
</tr>
</tbody>
</table>
</div>
</div>
</div>
</div>
</body>
</html>解决方案
推荐阅读
- mysql - 错误 1045 (28000)：Mac 上用户 'johnnyappleseed'@'localhost' 的访问被拒绝（使用密码：YES）
- python - 关键错误：值不在索引中......但它在那里
- node.js - Mongoose .create 架构
- javascript - 试图将链接锚定到选项卡。如何让链接跳转到输入锚并将其标记为已选中？
- python - 安装 yfinance 错误窗口 7 Anaconda
- python - Pandas 列重叠但未指定后缀
- python - Pyspark：按 ID 和最近日期向后连接 2 个数据帧
- python - Pygame 鼠标拖动碰撞
- django - Django 3.0：无法使用密码重置但能够从视图发送电子邮件
- open-policy-agent - 如何测试一个对象是rego中另一个对象的子集