Флажок True / False - Добавить к расчету

Question

Я часами гуглю и не могу найти решение, которое соответствует моему запросу.

Я пытаюсь создать контактную форму (используя контактную форму 7 в Wordpress), где каждыйпользовательский ввод соответствует значению $, которое вычисляется и отображается в реальном времени с использованием .innerHTML.

. type=number пользовательский ввод работает и хорошо рассчитывается, но я не могу понять, как сделать так, чтобы флажок способствовал вычислениюв зависимости от того, установлен флажок или нет.

Я использую код ниже, где #pages и #images - это просто type=number вход, #gallery - это флажок, который яУ меня проблемы с:

$('#pages').on('change', function() {
 calculateTotal();
});
$('#images').on('change', function() {
 calculateTotal();
});
$('#gallery').on('change', function() {
 calculateTotal();
});
function calculateTotal() {
var pages = document.getElementById('pages');
var images = document.getElementById('images');
var gallery = document.getElementById('gallery');
var totalPages = pages.value * 15;
var totalImages = images.value * 10;
var totalGallery = 0;
if (gallery.checked == true){
totalGallery = 30 } 
else { totalGallery = 0}
var totalCost = 60 + totalPages + totalImages + totalGallery;
document.getElementById('displayTotal').value = "$" + totalCost;
}

Как уже упоминалось, я использую плагин Contact Form 7 для Wordpress, поэтому код контактной формы представляет собой смесь шорткода и HTML:

<div class="quote-left"><label>Number of pages:*[number* number-31 min:0 max:100 id:pages]</label></div>

<div class="quote-left"><label>Number of images:*[number* number-31 min:0 max:100 id:images]</label></div>

<div class="quote-left">[checkbox checkbox-779 id:gallery label_first "Photo gallery / photo slideshow:"]</div>

<div class="quote-left">[checkbox checkbox-996 id:social label_first "Social media links and optimisation:"]</div>

<div class="quote-right">[checkbox checkbox-996 id:legal label_first "Legal information (cookies disclaimer, privacy policy etc):"]</div>

<div class="quote-right">[checkbox checkbox-996 id:email label_first "Email & subscriber integration:"]</div>

<div class="quote-right">[checkbox checkbox-996 id:logos label_first "Logo / branding:"]</div>

<div class="quote-right">[checkbox checkbox-996 id:domain label_first "Domain and hosting:"]</div>

[textarea textarea-713]

<label>Total cost:</label>
[text text-387 readonly id:displayTotal placeholder "$60"]

Заранее спасибо!

Answer 1

Как видно из приведенного ниже фрагмента, при попытке добавить number + undefined вы получите NaN

var number = 5;
var undefinedVar;

console.log(number + undefinedVar)

При запуске ваши значения не определены, поэтому я поставил троичный оператор, если значение не определено, используйте значение по умолчанию как 0

var pages = document.getElementById('pages');
var images = document.getElementById('images');
var gallery = document.getElementById('gallery');


$('#pages').change(function() {

 calculateTotal();
});
$('#images').change(function() {
 calculateTotal();
});
$('#gallery').change(function() {
 calculateTotal();
});
function calculateTotal() {
var totalPages = pages.value? (pages.value * 15) : 0;
var totalImages = images.value? (images.value * 10) : 0;
var totalGallery = 0;

if (gallery.checked == true){
totalGallery = 30 } 
else { totalGallery = 0}
var totalCost = 60 + totalPages + totalImages + totalGallery;
document.getElementById('displayTotal').innerHTML = "$" + totalCost;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input type="number" id="pages">
<input type="number" id="images">
<input type="checkbox" id="gallery">

<p>total: <span id="displayTotal"></span></p>