Я пытаюсь добавить функцию 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, просто сосредоточьтесь на funtion 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]: отображать общую цену при нажатии на флажок в JS
я тоже пробовал, но он не работает
total + = parseFloat (cal [i] .getAttribute ("data-price")
Не встраивайте обработчик событий!
Также 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>
Почему вы так много используете? и что означают звездочки '' после total() ? Я пробовал следующий фрагмент и, похоже, работает хорошо. (только изменение эхо-строки в вашем php-коде)
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";