英文:
Trying to total price with checkbox loop using JavaScript
问题
以下是您要翻译的内容:
我的目标是,当点击复选框时,它的data-price应该被添加到total变量中,然后这个变量应该显示在总价格文本框中,然而,目前当点击复选框时它不会更新值。
这是一个交互式示例,展示了它当前的工作/外观:
const form = document.getElementById('bookingForm');
const total = document.getElementsByName('total');
document.getElementById("bookingForm").addEventListener("click", function(e) {
if (e.target.name === "event[]") {
let total = 0;
[...document.querySelectorAll('input[data-price][type=checkbox]')].forEach(function(box) {
if (box.checked) {
total += +box.dataset.price;
} //if
})
document.querySelector("[name=total]").innerHTML = total.toFixed(2);
}
})
<form id="bookingForm" action="javascript:alert('form submitted');" method="get">
<section id="bookEvents">
<h2>选择事件</h2>
<div class='item'>
<span class='eventTitle'>事件编号1</span>
<span class='eventPrice'>10.50</span>
<span class='chosen'><input type='checkbox' name='event[]' value='1' data-price='10.50'></span>
</div>
<div class='item'>
<span class='eventTitle'>事件编号2</span>
<span class='eventPrice'>5.00</span>
<span class='chosen'><input type='checkbox' name='event[]' value='2' data-price='5.00'></span>
</div>
<section id="Cost">
<h2>总价</h2>
总价 <input type="text" name="total" size="12">
</section>
<p><input type="submit" name="submit" value="预订"></p>
</section>
</form>
英文:
My goal is when a checkbox is clicked it's data-price should be added to the total variable and then this variable should be shown in the total price text box, however, it currently doesn't update the value when a checkbox is clicked.
Here is an interactive example of how it currently works/looks:
<!-- begin snippet: js hide: false console: true babel: false -->
<!-- language: lang-js -->
const form = document.getElementById('bookingForm');
const total = document.getElementsByName[0]('total');
document.getElementById("bookingForm").addEventListener("click", function(e) {
if (e.target.name === "event[]") {
let total = 0;
[...document.querySelectorAll('input[data-price][type=checkbox]')].forEach(function(box) {
if (box.checked) {
total += +box.dataset.price;
} //if
})
document.querySelector("[name=total]").innerHTML = total.toFixed(2);
}
})
<!-- language: lang-html -->
<form id="bookingForm" action="javascript:alert('form submitted');" method="get">
<section id="bookEvents">
<h2>Select Events</h2>
<div class='item'>
<span class='eventTitle'>Event number 1</span>
<span class='eventPrice'>10.50</span>
<span class='chosen'><input type='checkbox' name='event[]' value='1' data-price='10.50'></span>
</div>
<div class='item'>
<span class='eventTitle'>Event number 2</span>
<span class='eventPrice'>5.00</span>
<span class='chosen'><input type='checkbox' name='event[]' value='2' data-price='5.00'></span>
</div>
<section id="Cost">
<h2>Total Price</h2>
Total Price <input type="text" name="total" size="12">
</section>
<p><input type="submit" name="submit" value="Book"></p>
</section>
</form>
<!-- end snippet -->
答案1
得分: 1
以下是您要求的代码部分的翻译:
const form = document.getElementById('bookingForm');
const total = document.getElementsByName('total');
var chksBoxes = document.querySelectorAll('.chkEvent');
chksBoxes.forEach(function(chk) {
chk.addEventListener("click", function(e) {
var total = 0;
chksBoxes.forEach(function(box) {
if (box.checked)
total += +box.dataset.price
});
document.querySelector("[name=total]").value = total.toFixed(2);
});
});
<form id="bookingForm" action="javascript:alert('form submitted');" method="get">
<section id="bookEvents">
<h2>Select Events</h2>
<div class='item'>
<span class='eventTitle'>Event number 1 </span>
<span class='eventPrice'>Price: 10.50</span>
<span class='chosen'><input type='checkbox' class="chkEvent" name='event[]' value='1' data-price='10.50'></span>
</div>
<div class='item'>
<span class='eventTitle'>Event number 2 </span>
<span class='eventPrice'>Price: 5.00</span>
<span class='chosen'><input type='checkbox' class="chkEvent" name='event[]' value='2' data-price='5.00'></span>
</div>
<section id="Cost">
<h2>Total Price</h2>
Total Price <input type="text" name="total" size="12">
</section>
<p><input type="submit" name="submit" value="Book"></p>
</section>
</form>
请注意,我只翻译了您提供的代码部分,没有包括其他内容。
英文:
<!-- begin snippet: js hide: false console: true babel: false -->
<!-- language: lang-js -->
const form = document.getElementById('bookingForm');
const total = document.getElementsByName('total');
var chksBoxes = document.querySelectorAll('.chkEvent');
chksBoxes.forEach(function(chk) {
chk.addEventListener("click", function(e) {
var total = 0;
chksBoxes.forEach(function(box) {
if (box.checked)
total += +box.dataset.price
});
document.querySelector("[name=total]").value = total.toFixed(2);
});
});
<!-- language: lang-html -->
<form id="bookingForm" action="javascript:alert('form submitted');" method="get">
<section id="bookEvents">
<h2>Select Events</h2>
<div class='item'>
<span class='eventTitle'>Event number 1 </span>
<span class='eventPrice'>Price: 10.50</span>
<span class='chosen'><input type='checkbox' class="chkEvent" name='event[]' value='1' data-price='10.50'></span>
</div>
<div class='item'>
<span class='eventTitle'>Event number 2 </span>
<span class='eventPrice'>Price: 5.00</span>
<span class='chosen'><input type='checkbox' class="chkEvent" name='event[]' value='2' data-price='5.00'></span>
</div>
<section id="Cost">
<h2>Total Price</h2>
Total Price <input type="text" name="total" size="12">
</section>
<p><input type="submit" name="submit" value="Book"></p>
</section>
</form>
<!-- end snippet -->
答案2
得分: 0
对于 Input
元素,你应该使用 value
而不是 innerHTML
。
const form = document.getElementById('bookingForm');
const total = document.getElementsByName('total')[0];
document.getElementById("bookingForm").addEventListener("click", function(e) {
if (e.target.name === "event[]") {
let total = 0;
[...document.querySelectorAll('input[data-price][type=checkbox]')].forEach(function(box) {
if (box.checked) {
total += +box.dataset.price;
} //if
})
document.querySelector("[name=total]").value = total.toFixed(2);
}
})
<form id="bookingForm" action="javascript:alert('form submitted');" method="get">
<section id="bookEvents">
<h2>Select Events</h2>
<div class='item'>
<span class='eventTitle'>Event number 1</span>
<span class='eventPrice'>10.50</span>
<span class='chosen'><input type='checkbox' name='event[]' value='1' data-price='10.50'></span>
</div>
<div class='item'>
<span class='eventTitle'>Event number 2</span>
<span class='eventPrice'>5.00</span>
<span class='chosen'><input type='checkbox' name='event[]' value='2' data-price='5.00'></span>
</div>
<section id="Cost">
<h2>Total Price</h2>
Total Price <input type="text" name="total" size="12">
</section>
<p><input type="submit" name="submit" value="Book"></p>
</section>
</form>
PS: 你在 第2行
有一个拼写错误,应该是 document.getElementsByName('total')[0];
而不是 document.getElementsByName[0]('total');
。
英文:
For Input
elements you should use value
instead of innerHTML
<!-- begin snippet: js hide: false console: true babel: false -->
<!-- language: lang-js -->
const form = document.getElementById('bookingForm');
const total = document.getElementsByName('total')[0];
document.getElementById("bookingForm").addEventListener("click", function(e) {
if (e.target.name === "event[]") {
let total = 0;
[...document.querySelectorAll('input[data-price][type=checkbox]')].forEach(function(box) {
if (box.checked) {
total += +box.dataset.price;
} //if
})
document.querySelector("[name=total]").value = total.toFixed(2);
}
})
<!-- language: lang-html -->
<form id="bookingForm" action="javascript:alert('form submitted');" method="get">
<section id="bookEvents">
<h2>Select Events</h2>
<div class='item'>
<span class='eventTitle'>Event number 1</span>
<span class='eventPrice'>10.50</span>
<span class='chosen'><input type='checkbox' name='event[]' value='1' data-price='10.50'></span>
</div>
<div class='item'>
<span class='eventTitle'>Event number 2</span>
<span class='eventPrice'>5.00</span>
<span class='chosen'><input type='checkbox' name='event[]' value='2' data-price='5.00'></span>
</div>
<section id="Cost">
<h2>Total Price</h2>
Total Price <input type="text" name="total" size="12">
</section>
<p><input type="submit" name="submit" value="Book"></p>
</section>
</form>
<!-- end snippet -->
PS: You have a typo at line# 2
where document.getElementsByName[0]('total');
should actually be document.getElementsByName('total')[0];
通过集体智慧和协作来改善编程学习和解决问题的方式。致力于成为全球开发者共同参与的知识库,让每个人都能够通过互相帮助和分享经验来进步。
评论