我对Javascript(biopython背景)比较陌生,我正在尝试向网站添加简单的功能。
本质上,我需要接受4种类型的菜单(复选框)的用户输入,然后将所选菜单的值($)的总和乘以天数和人数(用户使用文本字段输入的内容)。
下面是代码的HTML和Javascript部分
function multiply() {
var n_ppl = document.getElementsByName('people')[0].value;
var n_days = document.getElementsByName('days')[0].value;
return var out = n_ppl * n_days;
}
function totalIt() {
var n_ppl = document.getElementsByName('people')[0].value;
var n_days = document.getElementsByName('days')[0].value;
var input = document.getElementsByName("product");
var total = 0;
for (var i = 0; i < input.length; i++) {
if (input[i].checked) {
total += parseInt(input[i].value);
}
return var price = total
}
// not sure how can I get - var final = total * out
// after I get it I can finally do - document.getElementsByName("total")[0].value = "$" + final.toFixed(2);
<br> Breakfast <input name="product" value="12" type="checkbox" onclick="totalIt()" /> <br>
<br> First Meal <input name="product" value="20" type="checkbox" onclick="totalIt()" /> <br>
<br> Second Meal <input name="product" value="15" type="checkbox" onclick="totalIt()" /> <br>
<br> Craft Service <input name="product" value="10" type="checkbox" onclick="totalIt()" /> <br>
<br> Number of People <input type="text" name="people"> <br>
<br> Number of Days <input type="text" name="days"> <br>
<br> Total: <input value="$0.00" readonly="readonly" type="text" name="total" />
我先向所有Web开发人员致歉,以表达我的pythonic风格。
我还应该提到,两个函数可以完美地分开工作,但是即使不尝试相乘它们的输出(即,即使它们的代码彼此相邻也是如此),也没有任何效果。我将非常感谢您的帮助!
Element.addEventListener()
Node.querySelector()
和Node.querySelectorAll()
name="product[]"
语法。这将作为值数组提交到后端。 '[name="product[]"]:checked'
复选框的值减少(累加)为单个整数const EL_menu = document.querySelector("#menu");
const calcPrice = evt => {
const price = [...EL_menu.querySelectorAll('[name="product[]"]:checked')]
.reduce((n, el) => (n += +el.value, n), 0);
const nPers = +EL_menu.querySelector('[name="people"]').value || 1;
const nDays = +EL_menu.querySelector('[name="days"]').value || 1;
const total = price * nPers * nDays;
EL_menu.querySelector("[name=total]").value = `\$${total.toFixed(2)}`;
}
EL_menu.querySelectorAll("input").forEach(el => el.addEventListener('input', calcPrice));
#menu label { display: block; }
<div id="menu">
<label><input type="checkbox" name="product[]" value="12"> Breakfast</label>
<label><input type="checkbox" name="product[]" value="20"> First Meal</label>
<label><input type="checkbox" name="product[]" value="15"> Second Meal</label>
<label><input type="checkbox" name="product[]" value="10"> Craft Service</label>
<label><input type="number" name="people" value="1" min="1"> Number of People</label>
<label><input type="number" name="days" value="1" min="1"> Number of Days</label><br>
Total: <input type="text" name="total" value="$0.00" readonly="readonly">
</div>