javascript - php echo 中的 onclick 错误无效意外 token

Question

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

//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;

<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>

这里是java脚本代码，只关注函数total()

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
我也试过了，还是不行

total += parseFloat(cal[i].getAttribute("data-price")

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);
}

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);
}

<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>