Question

我在用户选中复选框时尝试添加onclick功能，然后显示总价。
包括价格在内的所有信息都是从数据库中检索的（检索数据没有问题，数据显示正确）以下是代码的样子。

＆＃13;

//calculate price
function total() {
  var cal = document.getElementsByName('event');
  var total = 0;
  for (var i = 0; i < cal.length; i++) {
    if (cal[i].checked) {
      total += parseFloat(cal[i].getAttribute("data-price"));
    }
  }
}
var checks = document.getElementsByName(event);
for (var i = 0; i < checks.length; i++) checks[i].onclick = total;

＆＃13;

<form id="bookingForm" action="javascript:alert('form submitted');" method="get">
		<section id="selectEvent">
			<h2>Select Events</h2>
    <div class ="item">
    <span class="chosen">
   event1 <input type= checkbox name= event data-price = "1" value=eventId1/>
    event2 <input type= checkbox name= event data-price = "2" value=eventId2/>
   </span>
   </div>
		</section>

	

		<section id="checkCost">
			<h2>Total cost</h2>
			Total <input type="text" name="total"  size="10" readonly />
		</section>

	
	</form>

＆＃13;

这里是java脚本代码，只关注功能总计（）

window.addEventListener('load', initialise);

    function initialise () {
        'use strict';
        //calculate price
        function total(){
        var cal= document.getElementsByName('event[]');
        var total = 0;
        for (var i = 0; i<cal.length; i++){
            if(cal[i].checked){
                total += parseFloat(cal[i].data-price);
            }
        }           
    document.getElementByName("total").value = "$" + total.toFixed(2);
    }

这是我参考的链接

[1]：Display total price when checkbox clicked in JS
我也尝试过，但它没有工作

总计+ = parseFloat（cal [i] .getAttribute（＆＃34; data-price＆＃34;）

Answer 1

不要内联事件处理程序！

getElementsByName也是复数并返回一个集合：

document.getElementsByName("total")[0].value

删除内联事件，改为使用

//calculate price
function total() {
  var cal = document.getElementsByName('event[]');
  var total = 0;
  for (var i = 0; i < cal.length; i++) {
    if (cal[i].checked) {
      total += parseFloat(cal[i].getAttribute("data-price"));
    }
  }
  document.getElementsByName("total")[0].value = "$" + total.toFixed(2);
}
var checks = document.getElementsByName('event[]');
for (var i = 0; i < checks.length; i++) checks[i].onclick = total;

如果您不在其他地方使用总计，请执行

var checks = document.getElementsByName('event[]');
for (var i = 0; i < checks.length; i++) checks[i].onclick = function() {
  var cal = document.getElementsByName('event[]');
  var total = 0;
  for (var i = 0; i < cal.length; i++) {
    if (cal[i].checked) {
      total += parseFloat(cal[i].getAttribute("data-price"));
    }
  }
  document.getElementsByName("total")[0].value = "$" + total.toFixed(2);
}

＆＃13;

var checks = document.getElementsByName('event[]');
for (var i = 0; i < checks.length; i++) checks[i].onclick = function() {
  var cal = document.getElementsByName('event[]');
  var total = 0;
  for (var i = 0; i < cal.length; i++) {
    if (cal[i].checked) {
      total += parseFloat(cal[i].getAttribute("data-price"));
    }
  }
  document.getElementsByName("total")[0].value = "$" + total.toFixed(2);
}

＆＃13;

<div class='item'>
  <span class='eventTitle'>title 1</span>
  <span class='eventStartDate'>1-1-2018</span>
  <span class='eventEndDate'>2-2-2018</span>
  <span class='catDesc'>Event 1</span>
  <span class='venueName'>Place 1</span>
  <span class='eventPrice'>100</span>
  <span class='chosen'><input type='checkbox' name='event[]' value='id1' data-price='100' /></span>
</div>
<div class='item'>
  <span class='eventTitle'>title 2</span>
  <span class='eventStartDate'>2-2-2018</span>
  <span class='eventEndDate'>3-3-2018</span>
  <span class='catDesc'>Event 2</span>
  <span class='venueName'>Place 2</span>
  <span class='eventPrice'>200</span>
  <span class='chosen'><input type='checkbox' name='event[]' value='id1' data-price='200' /></span>
</div>
<section id="checkCost">
		<h2>Total cost</h2>
		Total <input type="text" name="total"  size="10" readonly />
	</section>

＆＃13;

Answer 2

你为什么要用这么多＆＃39; \＆＃39; ？什么是星号＆＃39; *＆＃39;在total()之后？我尝试过以下片段，它似乎运作良好。（只更改php代码中的echo行）

echo "\t<div class='item'>
            <span class='eventTitle'>".filter_var($event['eventTitle'], FILTER_SANITIZE_SPECIAL_CHARS)."</span>
            <span class='eventStartDate'>{$event['eventStartDate']}</span>
            <span class='eventEndDate'>{$event['eventEndDate']}</span>
            <span class='catDesc'>{$event['catDesc']}</span>
            <span class='venueName'>{$event['venueName']}</span>
            <span class='eventPrice'>{$event['eventPrice']}</span>
            <span class='chosen'><input type='checkbox' name='event[]' value='{$event['eventID']}' data-price='{$event['eventPrice']}' onclick='total()*'/></span>
      </div>\n";

onclick in php echo with error invalid unexpected token

2 个答案: