尝试使用JavaScript循环复选框来计算总价格。

huangapple
go评论111阅读模式
英文:

Trying to total price with checkbox loop using JavaScript

问题

以下是您要翻译的内容：

我的目标是，当点击复选框时，它的data-price应该被添加到total变量中，然后这个变量应该显示在总价格文本框中，然而，目前当点击复选框时它不会更新值。

这是一个交互式示例，展示了它当前的工作/外观：

  1. const form = document.getElementById('bookingForm');
  2. const total = document.getElementsByName('total');
  3. document.getElementById("bookingForm").addEventListener("click", function(e) {
  4.   if (e.target.name === "event[]") {
  5.     let total = 0;
  6.     [...document.querySelectorAll('input[data-price][type=checkbox]')].forEach(function(box) {
  7.       if (box.checked) {
  8.         total += +box.dataset.price;
  9.       } //if
  10.     })
  11.     document.querySelector("[name=total]").innerHTML = total.toFixed(2);
  12.   }
  13. })
  1. <form id="bookingForm" action="javascript:alert('form submitted');" method="get">
  2. 	<section id="bookEvents">
  3. 		<h2>选择事件</h2>
  5. 		<div class='item'>
  6. 			<span class='eventTitle'>事件编号1</span>
  7. 			<span class='eventPrice'>10.50</span>
  8. 			<span class='chosen'><input type='checkbox' name='event[]' value='1' data-price='10.50'></span>
  9. 		</div>
  10. 		<div class='item'>
  11. 			<span class='eventTitle'>事件编号2</span>
  12. 			<span class='eventPrice'>5.00</span>
  13. 			<span class='chosen'><input type='checkbox' name='event[]' value='2' data-price='5.00'></span>
  14. 		</div>
  15. 		<section id="Cost">
  16. 			<h2>总价</h2>
  17. 			总价 <input type="text" name="total" size="12">
  18. 		</section>
  19. 		<p><input type="submit" name="submit" value="预订"></p>
  20. 	</section>
  21. </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 -->

  1. const form = document.getElementById(&#39;bookingForm&#39;);
  2. const total = document.getElementsByName[0](&#39;total&#39;);
  3. document.getElementById(&quot;bookingForm&quot;).addEventListener(&quot;click&quot;, function(e) {
  4.   if (e.target.name === &quot;event[]&quot;) {
  5.     let total = 0;
  6.     [...document.querySelectorAll(&#39;input[data-price][type=checkbox]&#39;)].forEach(function(box) {
  7.       if (box.checked) {
  8.         total += +box.dataset.price;
  9.       } //if
  10.     })
  11.     document.querySelector(&quot;[name=total]&quot;).innerHTML = total.toFixed(2);
  12.   }
  13. })

<!-- language: lang-html -->

  1. &lt;form id=&quot;bookingForm&quot; action=&quot;javascript:alert(&#39;form submitted&#39;);&quot; method=&quot;get&quot;&gt;
  2. 	&lt;section id=&quot;bookEvents&quot;&gt;
  3. 		&lt;h2&gt;Select Events&lt;/h2&gt;
  5. 	&lt;div class=&#39;item&#39;&gt;
  6. 				&lt;span class=&#39;eventTitle&#39;&gt;Event number 1&lt;/span&gt;
  7. 	            &lt;span class=&#39;eventPrice&#39;&gt;10.50&lt;/span&gt;
  8. 	            &lt;span class=&#39;chosen&#39;&gt;&lt;input type=&#39;checkbox&#39; name=&#39;event[]&#39; value=&#39;1&#39; data-price=&#39;10.50&#39;&gt;&lt;/span&gt;
  9. 	      		&lt;/div&gt;
  10. 	&lt;div class=&#39;item&#39;&gt;
  11. 				&lt;span class=&#39;eventTitle&#39;&gt;Event number 2&lt;/span&gt;
  12. 	            &lt;span class=&#39;eventPrice&#39;&gt;5.00&lt;/span&gt;
  13. 	            &lt;span class=&#39;chosen&#39;&gt;&lt;input type=&#39;checkbox&#39; name=&#39;event[]&#39; value=&#39;2&#39; data-price=&#39;5.00&#39;&gt;&lt;/span&gt;
  14. 	      		&lt;/div&gt;
  15.       &lt;section id=&quot;Cost&quot;&gt;
  16. 			&lt;h2&gt;Total Price&lt;/h2&gt;
  17. 			Total Price &lt;input type=&quot;text&quot; name=&quot;total&quot; size=&quot;12&quot;&gt;
  18. 		&lt;/section&gt;
  19.             
  20. 			&lt;p&gt;&lt;input type=&quot;submit&quot; name=&quot;submit&quot; value=&quot;Book&quot;&gt;&lt;/p&gt;
  21. 		&lt;/section&gt;
  22. 	&lt;/form&gt;

<!-- end snippet -->

答案1

得分: 1

以下是您要求的代码部分的翻译：

  1. const form = document.getElementById('bookingForm');
  2. const total = document.getElementsByName('total');
  3. var chksBoxes = document.querySelectorAll('.chkEvent');
  5. chksBoxes.forEach(function(chk) {
  6.   chk.addEventListener("click", function(e) {
  7.     var total = 0;
  8.     chksBoxes.forEach(function(box) {
  9.       if (box.checked)
  10.         total += +box.dataset.price
  11.     });
  12.     document.querySelector("[name=total]").value = total.toFixed(2);
  13.   });
  14. });
  1. <form id="bookingForm" action="javascript:alert('form submitted');" method="get">
  2.   <section id="bookEvents">
  3.     <h2>Select Events</h2>
  5.     <div class='item'>
  6.       <span class='eventTitle'>Event number 1 </span>
  7.       <span class='eventPrice'>Price: 10.50</span>
  8.       <span class='chosen'><input type='checkbox' class="chkEvent" name='event[]' value='1' data-price='10.50'></span>
  9.     </div>
  10.     <div class='item'>
  11.       <span class='eventTitle'>Event number 2 </span>
  12.       <span class='eventPrice'>Price: 5.00</span>
  13.       <span class='chosen'><input type='checkbox' class="chkEvent" name='event[]' value='2' data-price='5.00'></span>
  14.     </div>
  15.     <section id="Cost">
  16.       <h2>Total Price</h2>
  17.       Total Price <input type="text" name="total" size="12">
  18.     </section>
  20.     <p><input type="submit" name="submit" value="Book"></p>
  21.   </section>
  22. </form>

请注意，我只翻译了您提供的代码部分，没有包括其他内容。

英文:

<!-- begin snippet: js hide: false console: true babel: false -->

<!-- language: lang-js -->

  1. const form = document.getElementById(&#39;bookingForm&#39;);
  2. const total = document.getElementsByName(&#39;total&#39;);
  3. var chksBoxes = document.querySelectorAll(&#39;.chkEvent&#39;);
  5. chksBoxes.forEach(function(chk) {
  6.   chk.addEventListener(&quot;click&quot;, function(e) {
  7.     var total = 0;
  8.     chksBoxes.forEach(function(box) {
  9.       if (box.checked)
  10.         total += +box.dataset.price
  11.     });
  12.     document.querySelector(&quot;[name=total]&quot;).value = total.toFixed(2);
  13.   });
  14. });

<!-- language: lang-html -->

  1. &lt;form id=&quot;bookingForm&quot; action=&quot;javascript:alert(&#39;form submitted&#39;);&quot; method=&quot;get&quot;&gt;
  2.   &lt;section id=&quot;bookEvents&quot;&gt;
  3.     &lt;h2&gt;Select Events&lt;/h2&gt;
  5.     &lt;div class=&#39;item&#39;&gt;
  6.       &lt;span class=&#39;eventTitle&#39;&gt;Event number 1 &lt;/span&gt;
  7.       &lt;span class=&#39;eventPrice&#39;&gt;Price: 10.50&lt;/span&gt;
  8.       &lt;span class=&#39;chosen&#39;&gt;&lt;input type=&#39;checkbox&#39; class=&quot;chkEvent&quot; name=&#39;event[]&#39; value=&#39;1&#39; data-price=&#39;10.50&#39;&gt;&lt;/span&gt;
  9.     &lt;/div&gt;
  10.     &lt;div class=&#39;item&#39;&gt;
  11.       &lt;span class=&#39;eventTitle&#39;&gt;Event number 2 &lt;/span&gt;
  12.       &lt;span class=&#39;eventPrice&#39;&gt;Price: 5.00&lt;/span&gt;
  13.       &lt;span class=&#39;chosen&#39;&gt;&lt;input type=&#39;checkbox&#39; class=&quot;chkEvent&quot; name=&#39;event[]&#39; value=&#39;2&#39; data-price=&#39;5.00&#39;&gt;&lt;/span&gt;
  14.     &lt;/div&gt;
  15.     &lt;section id=&quot;Cost&quot;&gt;
  16.       &lt;h2&gt;Total Price&lt;/h2&gt;
  17.       Total Price &lt;input type=&quot;text&quot; name=&quot;total&quot; size=&quot;12&quot;&gt;
  18.     &lt;/section&gt;
  20.     &lt;p&gt;&lt;input type=&quot;submit&quot; name=&quot;submit&quot; value=&quot;Book&quot;&gt;&lt;/p&gt;
  21.   &lt;/section&gt;
  22. &lt;/form&gt;

<!-- end snippet -->

答案2

得分: 0

对于 Input 元素，你应该使用 value 而不是 innerHTML。

  1. const form = document.getElementById('bookingForm');
  2. const total = document.getElementsByName('total')[0];
  3. document.getElementById("bookingForm").addEventListener("click", function(e) {
  4.   if (e.target.name === "event[]") {
  5.     let total = 0;
  6.     [...document.querySelectorAll('input[data-price][type=checkbox]')].forEach(function(box) {
  7.       if (box.checked) {
  8.         total += +box.dataset.price;
  9.       } //if
  10.     })
  11.     document.querySelector("[name=total]").value = total.toFixed(2);
  12.   }
  13. })
  1. <form id="bookingForm" action="javascript:alert('form submitted');" method="get">
  2.   <section id="bookEvents">
  3.     <h2>Select Events</h2>
  5.     <div class='item'>
  6.       <span class='eventTitle'>Event number 1</span>
  7.       <span class='eventPrice'>10.50</span>
  8.       <span class='chosen'><input type='checkbox' name='event[]' value='1' data-price='10.50'></span>
  9.     </div>
  10.     <div class='item'>
  11.       <span class='eventTitle'>Event number 2</span>
  12.       <span class='eventPrice'>5.00</span>
  13.       <span class='chosen'><input type='checkbox' name='event[]' value='2' data-price='5.00'></span>
  14.     </div>
  15.     <section id="Cost">
  16.       <h2>Total Price</h2>
  17.       Total Price <input type="text" name="total" size="12">
  18.     </section>
  20.     <p><input type="submit" name="submit" value="Book"></p>
  21.   </section>
  22. </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 -->

  1. const form = document.getElementById(&#39;bookingForm&#39;);
  2. const total = document.getElementsByName(&#39;total&#39;)[0];
  3. document.getElementById(&quot;bookingForm&quot;).addEventListener(&quot;click&quot;, function(e) {
  4.   if (e.target.name === &quot;event[]&quot;) {
  5.     let total = 0;
  6.     [...document.querySelectorAll(&#39;input[data-price][type=checkbox]&#39;)].forEach(function(box) {
  7.       if (box.checked) {
  8.         total += +box.dataset.price;
  9.       } //if
  10.     })
  11.     document.querySelector(&quot;[name=total]&quot;).value = total.toFixed(2);
  12.   }
  13. })

<!-- language: lang-html -->

  1. &lt;form id=&quot;bookingForm&quot; action=&quot;javascript:alert(&#39;form submitted&#39;);&quot; method=&quot;get&quot;&gt;
  2. 	&lt;section id=&quot;bookEvents&quot;&gt;
  3. 		&lt;h2&gt;Select Events&lt;/h2&gt;
  5. 	&lt;div class=&#39;item&#39;&gt;
  6. 				&lt;span class=&#39;eventTitle&#39;&gt;Event number 1&lt;/span&gt;
  7. 	            &lt;span class=&#39;eventPrice&#39;&gt;10.50&lt;/span&gt;
  8. 	            &lt;span class=&#39;chosen&#39;&gt;&lt;input type=&#39;checkbox&#39; name=&#39;event[]&#39; value=&#39;1&#39; data-price=&#39;10.50&#39;&gt;&lt;/span&gt;
  9. 	      		&lt;/div&gt;
  10. 	&lt;div class=&#39;item&#39;&gt;
  11. 				&lt;span class=&#39;eventTitle&#39;&gt;Event number 2&lt;/span&gt;
  12. 	            &lt;span class=&#39;eventPrice&#39;&gt;5.00&lt;/span&gt;
  13. 	            &lt;span class=&#39;chosen&#39;&gt;&lt;input type=&#39;checkbox&#39; name=&#39;event[]&#39; value=&#39;2&#39; data-price=&#39;5.00&#39;&gt;&lt;/span&gt;
  14. 	      		&lt;/div&gt;
  15.       &lt;section id=&quot;Cost&quot;&gt;
  16. 			&lt;h2&gt;Total Price&lt;/h2&gt;
  17. 			Total Price &lt;input type=&quot;text&quot; name=&quot;total&quot; size=&quot;12&quot;&gt;
  18. 		&lt;/section&gt;
  19.             
  20. 			&lt;p&gt;&lt;input type=&quot;submit&quot; name=&quot;submit&quot; value=&quot;Book&quot;&gt;&lt;/p&gt;
  21. 		&lt;/section&gt;
  22. 	&lt;/form&gt;

<!-- end snippet -->

PS: You have a typo at line# 2 where document.getElementsByName[0](&#39;total&#39;); should actually be document.getElementsByName(&#39;total&#39;)[0];

huangapple
  • 本文由 发表于 2020年1月6日 19:24:06
  • 转载请务必保留本文链接：https://go.coder-hub.com/59611254.html
  • html
  • javascript
匿名

发表评论

匿名网友

:?: :razz: :sad: :evil: :!: :smile: :oops: :grin: :eek: :shock: :???: :cool: :lol: :mad: :twisted: :roll: :wink: :idea: :arrow: :neutral: :cry: :mrgreen:

确定