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

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

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(&#39;bookingForm&#39;);
const total = document.getElementsByName[0](&#39;total&#39;);
document.getElementById(&quot;bookingForm&quot;).addEventListener(&quot;click&quot;, function(e) {
  if (e.target.name === &quot;event[]&quot;) {
    let total = 0;
    [...document.querySelectorAll(&#39;input[data-price][type=checkbox]&#39;)].forEach(function(box) {
      if (box.checked) {
        total += +box.dataset.price;
      } //if
    })
    document.querySelector(&quot;[name=total]&quot;).innerHTML = total.toFixed(2);
  }
})

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

&lt;form id=&quot;bookingForm&quot; action=&quot;javascript:alert(&#39;form submitted&#39;);&quot; method=&quot;get&quot;&gt;
	&lt;section id=&quot;bookEvents&quot;&gt;
		&lt;h2&gt;Select Events&lt;/h2&gt;

	&lt;div class=&#39;item&#39;&gt;
				&lt;span class=&#39;eventTitle&#39;&gt;Event number 1&lt;/span&gt;
	            &lt;span class=&#39;eventPrice&#39;&gt;10.50&lt;/span&gt;
	            &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;
	      		&lt;/div&gt;
	&lt;div class=&#39;item&#39;&gt;
				&lt;span class=&#39;eventTitle&#39;&gt;Event number 2&lt;/span&gt;
	            &lt;span class=&#39;eventPrice&#39;&gt;5.00&lt;/span&gt;
	            &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;
	      		&lt;/div&gt;
      &lt;section id=&quot;Cost&quot;&gt;
			&lt;h2&gt;Total Price&lt;/h2&gt;
			Total Price &lt;input type=&quot;text&quot; name=&quot;total&quot; size=&quot;12&quot;&gt;
		&lt;/section&gt;
            
			&lt;p&gt;&lt;input type=&quot;submit&quot; name=&quot;submit&quot; value=&quot;Book&quot;&gt;&lt;/p&gt;
		&lt;/section&gt;
	&lt;/form&gt;

<!-- 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(&#39;bookingForm&#39;);
const total = document.getElementsByName(&#39;total&#39;);
var chksBoxes = document.querySelectorAll(&#39;.chkEvent&#39;);

chksBoxes.forEach(function(chk) {
  chk.addEventListener(&quot;click&quot;, function(e) {
    var total = 0;
    chksBoxes.forEach(function(box) {
      if (box.checked)
        total += +box.dataset.price
    });
    document.querySelector(&quot;[name=total]&quot;).value = total.toFixed(2);
  });
});

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

&lt;form id=&quot;bookingForm&quot; action=&quot;javascript:alert(&#39;form submitted&#39;);&quot; method=&quot;get&quot;&gt;
  &lt;section id=&quot;bookEvents&quot;&gt;
    &lt;h2&gt;Select Events&lt;/h2&gt;

    &lt;div class=&#39;item&#39;&gt;
      &lt;span class=&#39;eventTitle&#39;&gt;Event number 1 &lt;/span&gt;
      &lt;span class=&#39;eventPrice&#39;&gt;Price: 10.50&lt;/span&gt;
      &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;
    &lt;/div&gt;
    &lt;div class=&#39;item&#39;&gt;
      &lt;span class=&#39;eventTitle&#39;&gt;Event number 2 &lt;/span&gt;
      &lt;span class=&#39;eventPrice&#39;&gt;Price: 5.00&lt;/span&gt;
      &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;
    &lt;/div&gt;
    &lt;section id=&quot;Cost&quot;&gt;
      &lt;h2&gt;Total Price&lt;/h2&gt;
      Total Price &lt;input type=&quot;text&quot; name=&quot;total&quot; size=&quot;12&quot;&gt;
    &lt;/section&gt;

    &lt;p&gt;&lt;input type=&quot;submit&quot; name=&quot;submit&quot; value=&quot;Book&quot;&gt;&lt;/p&gt;
  &lt;/section&gt;
&lt;/form&gt;

<!-- 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(&#39;bookingForm&#39;);
const total = document.getElementsByName(&#39;total&#39;)[0];
document.getElementById(&quot;bookingForm&quot;).addEventListener(&quot;click&quot;, function(e) {
  if (e.target.name === &quot;event[]&quot;) {
    let total = 0;
    [...document.querySelectorAll(&#39;input[data-price][type=checkbox]&#39;)].forEach(function(box) {
      if (box.checked) {
        total += +box.dataset.price;
      } //if
    })
    document.querySelector(&quot;[name=total]&quot;).value = total.toFixed(2);
  }
})

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

&lt;form id=&quot;bookingForm&quot; action=&quot;javascript:alert(&#39;form submitted&#39;);&quot; method=&quot;get&quot;&gt;
	&lt;section id=&quot;bookEvents&quot;&gt;
		&lt;h2&gt;Select Events&lt;/h2&gt;

	&lt;div class=&#39;item&#39;&gt;
				&lt;span class=&#39;eventTitle&#39;&gt;Event number 1&lt;/span&gt;
	            &lt;span class=&#39;eventPrice&#39;&gt;10.50&lt;/span&gt;
	            &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;
	      		&lt;/div&gt;
	&lt;div class=&#39;item&#39;&gt;
				&lt;span class=&#39;eventTitle&#39;&gt;Event number 2&lt;/span&gt;
	            &lt;span class=&#39;eventPrice&#39;&gt;5.00&lt;/span&gt;
	            &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;
	      		&lt;/div&gt;
      &lt;section id=&quot;Cost&quot;&gt;
			&lt;h2&gt;Total Price&lt;/h2&gt;
			Total Price &lt;input type=&quot;text&quot; name=&quot;total&quot; size=&quot;12&quot;&gt;
		&lt;/section&gt;
            
			&lt;p&gt;&lt;input type=&quot;submit&quot; name=&quot;submit&quot; value=&quot;Book&quot;&gt;&lt;/p&gt;
		&lt;/section&gt;
	&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
匿名

发表评论

匿名网友

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

确定