I want to add price and multiply with if statement to clarify here is some price for variable
Private=100 for adults and 50 for children or shared=40 for adults and 30 for children
with atv=100 for adult 80 for children or without atv=0
if the only adult is booking on the web I want the price to react like the sum of both selections multiply with the number of adult example
the adult book shared with ATV so 40+100=140 * number of adult
if adults and children are booking shared with ATV then it should react like
40+100=140 * number of adults
30+80=110 * no of children
the result should be summing (110 * number of children) + (140 * number of adults)
<!doctype html>
<html lang="en">
<head>
<title>Title</title>
<!-- Required meta tags -->
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<!-- Bootstrap CSS -->
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
<style>
.small-img-group {
display: flex;
justify-content: space-between;
}
.small-img-col {
flex-basis: 24%;
cursor: pointer;
}
.counter1 {
float: left;
display: flex;
justify-content: space-between;
overflow-x: hidden;
overflow-y: hidden;
}
.counter2 {
float: left;
display: flex;
justify-content: space-between;
overflow-x: hidden;
overflow-y: hidden;
padding-left: 15px;
}
.up,
.down {
display: inline-block;
color: rgb(0, 0, 0);
font-size: 20px;
margin: 1px 1px;
cursor: pointer;
width: 15px;
line-height: 14px;
height: 16px;
text-align: center;
font-weight: bold;
border: 1px solid #000;
user-select: none;
}
.up:hover,
.down:hover {
color: #fd0b3f;
text-align: center;
}
.adults {
padding-right: 5px;
}
.children {
padding-right: 5px;
}
input {
appearance: none;
height: 21px;
text-align: center;
width: 42px;
line-height: 24px;
font-size: 15px;
border-radius: 5px;
}
.container {
display: flex;
}
input[type="radio"] {
display: none;
}
label[for=private] {
position: relative;
color: orangered;
font-size: 20px;
border: 2px solid orangered;
border-radius: 5px;
align-items: left;
display: flex;
cursor: pointer;
margin-right: 10px;
}
label[for=shared] {
position: relative;
color: orangered;
font-size: 20px;
border: 2px solid orangered;
border-radius: 5px;
align-items: left;
display: flex;
cursor: pointer;
}
input[type="radio"]:checked+label {
background-color: orangered;
color: white;
}
input[type="radio"]:checked+label:before {
height: 16px;
width: 16px;
border: 10px solid white;
background-color: orangered;
}
</style>
</head>
<body>
<section class="container sproduct my-5 pt-5">
<div class="row mt-5">
<div class="col-lg-5 col-md-12 col-12">
<img class="img-fluid w-100 pb-1" src="https://skylandtourism.com/wp-content/uploads/2018/03/Morning-Safari.jpg" alt="" id="MainImg" width="450">
<div class="small-img-group">
<div class="small-img-col">
<img src="https://media.tacdn.com/media/attractions-splice-spp-674x446/09/99/99/87.jpg" width="100%" class="small-img" alt="">
</div>
<div class="small-img-col">
<img src="https://skylandtourism.com/wp-content/uploads/2018/03/Morning-Safari.jpg" width="100%" class="small-img" alt="">
</div>
<div class="small-img-col">
<img src="https://skylandtourism.com/wp-content/uploads/2018/03/Morning-Safari.jpg" width="100%" class="small-img" alt="">
</div>
<div class="small-img-col">
<img src="https://skylandtourism.com/wp-content/uploads/2018/03/Morning-Safari.jpg" width="100%" class="small-img" alt="">
</div>
</div>
</div>
<div class="col-lg-6 col-md-12 col-12">
<h6>Home / Morning Safari</h6>
<h3>Morning Safari</h3>
<h2> <label> Total:</label><label class="total Price"></label> </h2>
<div class="counter1">
<Label class="Adults">Adults</Label>
<div class='down' onclick='decreaseCount(event, this)'>-</div>
<input type='text' value='1' readonly>
<div class='up' onclick='increaseCount(event, this)'>+</div>
</div>
<div class="counter2">
<Label class="Children">Children</Label>
<div class='down' onclick='decreaseCount2(event, this)'>-</div>
<input type='text' value='0' readonly>
<div class='up' onclick='increaseCount(event, this)'>+</div>
</div>
<div class="container" style="padding-left: 0;padding-top: 5px;">
<div>
<input type="radio" name="occupancy" id="private" checked="checked">
<label for="private">Private</label>
<input type="radio" name="occupancy" id="shared">
<label for="shared">Shared</label>
</div>
<div>
<input type="radio" name="atv" id="withatv" checked="checked">
<label for="withatv">With ATV</label>
<input type="radio" name="atv" id="withoutatv">
<label for="withoutatv">Without ATV</label>
</div>
</div>
</div>
</div>
</section>
<!-- Optional JavaScript -->
<!-- jQuery first, then Popper.js, then Bootstrap JS -->
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js" integrity="sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js" integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM" crossorigin="anonymous"></script>
<script>
function increaseCount(e, el) {
var input = el.previousElementSibling;
var value = parseInt(input.value, 10);
value = isNaN(value) ? 0 : value;
value++;
input.value = value;
}
function decreaseCount(e, el) {
var input = el.nextElementSibling;
var value = parseInt(input.value, 10);
if (value > 1) {
value = isNaN(value) ? 0 : value;
value--;
input.value = value;
}
}
function decreaseCount2(e, el) {
var input = el.nextElementSibling;
var value = parseInt(input.value, 10);
if (value > 0) {
value = isNaN(value) ? 0 : value;
value--;
input.value = value;
}
}
var MainImg = document.getElementById('MainImg');
var smallimg = document.getElementsByClassName('small-img');
smallimg[0].onclick = function() {
MainImg.src = smallimg[0].src;
}
smallimg[1].onclick = function() {
MainImg.src = smallimg[1].src;
}
smallimg[2].onclick = function() {
MainImg.src = smallimg[2].src;
}
smallimg[3].onclick = function() {
MainImg.src = smallimg[3].src;
}
</script>
</body>
</html>
I did multiple changes to be able to work with this in an easier way:
Step 0 - HTML Include id in adults, children input (to be able to get those values)
Step 1 - HTML After every modification (change children/adult, atv/no atv, private/shared) render not total
Step 2 - JS Calculate new total and render
The Plnkr with the example: https://plnkr.co/edit/XOebeFyHNXFswNI4
Step 0 & 1: HTML:
onclick="updateTotal()"
/>
<label for="withatv">With ATV</label>
<input
type="radio"
name="atv"
id="withoutatv"
onclick="updateTotal()"
/>
<label for="withoutatv">Without ATV</label>
</div>
</div>
Step 2:
function calculateTotal() {
// Define based Prices
const privateAdultPrice = 100;
const sharedAdultPrice = 40;
const privateChildrenPrice = 50;
const sharedChildrenPrice = 30;
const withAtvAdultPrice = 100;
const withAtvChildrenPrice = 80;
const noAtvPrice = 0;
// Get the amount of adults and guests
const adults = +document.querySelector('#adults').value;
const children = +document.querySelector('#children').value;
// Get the type of trip
const isPrivate = document.getElementById('private').checked;
const isWithAtv = document.getElementById('withatv').checked;
// Calculate the specific charge per type of user and type of trip
const adultTripPrice = isPrivate ? privateAdultPrice : sharedAdultPrice;
const childrenTripPrice = isPrivate ? privateChildrenPrice : sharedChildrenPrice;
// Calculate the specific charge per type of user and the vehicule\
const adultVehiclePrice = isWithAtv ? withAtvAdultPrice : noAtvPrice;
const childrenVehiclePrice = isWithAtv ? withAtvChildrenPrice : noAtvPrice;
// Finally, do the maths
const adultPrice = adults * (adultTripPrice + adultVehiclePrice)
const childrenPrice = children * (childrenTripPrice + childrenVehiclePrice)
// return the value
return adultPrice + childrenPrice;
}
function updateTotal() {
const total = calculateTotal();
console.log(total);
document.querySelector('#totalPrice').innerHTML = total;
}
Related
I tried but can't get it after this so please help me with this.
I want to set the adult price in such a way that if private is selected than with ATV is 100 and without ATV is 10
but if shared is selected than with ATV is 50 and without ATV is 5
for children, if private is selected then with ATV is 50 and without ATV is 5
but if shared is selected then with ATV is 25 and without 3
function calculateTotal() {
const privateAdultPrice = 0;
const sharedAdultPrice = 0;
const privateChildrenPrice = 0;
const sharedChildrenPrice = 0;
const withAtvAdultPrice = 100;
const withAtvChildrenPrice = 80;
const noAtvPrice = 10;
const adults = +document.querySelector('#adults').value;
const children = +document.querySelector('#children').value;
const isPrivate = document.getElementById('private').checked;
const isWithAtv = document.getElementById('withatv').checked;
const adultTripPrice = isPrivate ? privateAdultPrice : sharedAdultPrice;
const childrenTripPrice = isPrivate ? privateChildrenPrice : sharedChildrenPrice;
const adultVehiclePrice = isWithAtv ? withAtvAdultPrice : noAtvPrice;
const childrenVehiclePrice = isWithAtv ? withAtvChildrenPrice : noAtvPrice;
const adultPrice = adults * (adultTripPrice + adultVehiclePrice)
const childrenPrice = children * (childrenTripPrice + childrenVehiclePrice)
return adultPrice + childrenPrice;
}
function updateTotal() {
const total = calculateTotal();
console.log(total);
document.querySelector('#totalPrice').innerHTML = total;
}
function increaseCount(e, el) {
var input = el.previousElementSibling;
var value = parseInt(input.value, 10);
value = isNaN(value) ? 0 : value;
value++;
input.value = value;
updateTotal();
}
function decreaseCount(e, el) {
var input = el.nextElementSibling;
var value = parseInt(input.value, 10);
if (value > 1) {
value = isNaN(value) ? 0 : value;
value--;
input.value = value;
}
updateTotal();
}
function decreaseCount2(e, el) {
var input = el.nextElementSibling;
var value = parseInt(input.value, 10);
if (value > 0) {
value = isNaN(value) ? 0 : value;
value--;
input.value = value;
}
updateTotal();
}
var MainImg = document.getElementById('MainImg');
var smallimg = document.getElementsByClassName('small-img');
smallimg[0].onclick = function () {
MainImg.src = smallimg[0].src;
};
smallimg[1].onclick = function () {
MainImg.src = smallimg[1].src;
};
smallimg[2].onclick = function () {
MainImg.src = smallimg[2].src;
};
smallimg[3].onclick = function () {
MainImg.src = smallimg[3].src;
};
<!DOCTYPE html>
<html lang="en">
<head>
<title>Title</title>
<!-- Required meta tags -->
<meta charset="utf-8" />
<meta
name="viewport"
content="width=device-width, initial-scale=1, shrink-to-fit=no"
/>
<!-- Bootstrap CSS -->
<link
rel="stylesheet"
href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css"
integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T"
crossorigin="anonymous"
/>
<style>
.small-img-group {
display: flex;
justify-content: space-between;
}
.small-img-col {
flex-basis: 24%;
cursor: pointer;
}
.counter1 {
float: left;
display: flex;
justify-content: space-between;
overflow-x: hidden;
overflow-y: hidden;
}
.counter2 {
float: left;
display: flex;
justify-content: space-between;
overflow-x: hidden;
overflow-y: hidden;
padding-left: 15px;
}
.up,
.down {
display: inline-block;
color: rgb(0, 0, 0);
font-size: 20px;
margin: 1px 1px;
cursor: pointer;
width: 15px;
line-height: 14px;
height: 16px;
text-align: center;
font-weight: bold;
border: 1px solid #000;
user-select: none;
}
.up:hover,
.down:hover {
color: #fd0b3f;
text-align: center;
}
.adults {
padding-right: 5px;
}
.children {
padding-right: 5px;
}
input {
appearance: none;
height: 21px;
text-align: center;
width: 42px;
line-height: 24px;
font-size: 15px;
border-radius: 5px;
}
.container {
display: flex;
width: 2000px
}
input[type='radio'] {
display: none;
}
label[for='private'] {
position: relative;
color: orangered;
font-size: 20px;
border: 2px solid orangered;
border-radius: 5px;
align-items: left;
display: flex;
cursor: pointer;
margin-right: 10px;
}
label[for='shared'] {
position: relative;
color: orangered;
font-size: 20px;
border: 2px solid orangered;
border-radius: 5px;
align-items: left;
display: flex;
cursor: pointer;
}
label[for='withatv'] {
position: relative;
color: orangered;
font-size: 20px;
border: 2px solid orangered;
border-radius: 5px;
align-items: left;
display: flex;
cursor: pointer;
margin-right: 10px;
}
label[for='withoutatv'] {
position: relative;
color: orangered;
font-size: 20px;
border: 2px solid orangered;
border-radius: 5px;
align-items: left;
display: flex;
cursor: pointer;
}
input[type='radio']:checked + label {
background-color: orangered;
color: white;
}
input[type='radio']:checked + label:before {
height: 16px;
width: 16px;
border: 10px solid white;
background-color: orangered;
}
</style>
</head>
<body>
<section class="container sproduct my-5 pt-5">
<div class="row mt-5">
<div class="col-lg-5 col-md-12 col-12">
<img
class="img-fluid w-100 pb-1"
src="https://skylandtourism.com/wp-content/uploads/2018/03/Morning-Safari.jpg"
alt=""
id="MainImg"
width="450"
/>
<div class="small-img-group">
<div class="small-img-col">
<img
src="https://media.tacdn.com/media/attractions-splice-spp-674x446/09/99/99/87.jpg"
width="100%"
class="small-img"
alt=""
/>
</div>
<div class="small-img-col">
<img
src="https://skylandtourism.com/wp-content/uploads/2018/03/Morning-Safari.jpg"
width="100%"
class="small-img"
alt=""
/>
</div>
<div class="small-img-col">
<img
src="https://skylandtourism.com/wp-content/uploads/2018/03/Morning-Safari.jpg"
width="100%"
class="small-img"
alt=""
/>
</div>
<div class="small-img-col">
<img
src="https://skylandtourism.com/wp-content/uploads/2018/03/Morning-Safari.jpg"
width="100%"
class="small-img"
alt=""
/>
</div>
</div>
</div>
<div class="col-lg-6 col-md-12 col-12">
<h6>Home / Morning Safari</h6>
<h3>Morning Safari</h3>
<h2><label> Total:</label><label id="totalPrice"class="total Price"></label></h2>
<div class="counter1">
<label class="Adults">Adults</label>
<div class="down" onclick="decreaseCount(event, this)">-</div>
<input id="adults" type="text" value="1" readonly />
<div class="up" onclick="increaseCount(event, this)">+</div>
</div>
<div class="counter2">
<label class="Children">Children</label>
<div class="down" onclick="decreaseCount2(event, this)">-</div>
<input id="children" type="text" value="0" readonly />
<div class="up" onclick="increaseCount(event, this)">+</div>
</div>
<div class="container" style="padding-left: 0; padding-top: 5px">
<div>
<input
type="radio"
name="occupancy"
id="private"
checked="checked"
onclick="updateTotal()"
/>
<label for="private">Private</label>
<input
type="radio"
name="occupancy"
id="shared"
onclick="updateTotal()"
/>
<label for="shared">Shared</label>
</div>
<div>
<input
type="radio"
name="atv"
id="withatv"
checked="checked"
onclick="updateTotal()"
/>
<label for="withatv">With ATV</label>
<input
type="radio"
name="atv"
id="withoutatv"
onclick="updateTotal()"
/>
<label for="withoutatv">Without ATV</label>
</div>
</div>
</div>
</div>
</section>
<!-- Optional JavaScript -->
<!-- jQuery first, then Popper.js, then Bootstrap JS -->
<script
src="https://code.jquery.com/jquery-3.3.1.slim.min.js"
integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo"
crossorigin="anonymous"
></script>
<script
src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js"
integrity="sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1"
crossorigin="anonymous"
></script>
<script
src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"
integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM"
crossorigin="anonymous"
></script>
<script>
</script>
</body>
</html>
hi
I tried but can't get it after this so please help me with this.
I want to set the adult price in such a way that if private is selected then with ATV is 100 and without ATV is 10
but if shared is selected than with ATV is 50 and without ATV is 5
for children, if private is selected then with ATV is 50 and without ATV is 5
but if shared is selected then with ATV is 25 and without 3
Now, your price is based on conditions.
So, the way to calculate is a little different. Translating your words, in JS code it'd be something like:
const adultTripPrice = isPrivate && isWithAtv ? 100 : isPrivate ? 10 : isWithAtv ? 50 : 5;
const childrenTripPrice = isPrivate && isWithAtv ? 50 : isPrivate ? 5 : isWithAtv ? 25 : 3;
const adultPrice = adults * (adultTripPrice)
const childrenPrice = children * (childrenTripPrice)
It evaluates for adults
isPrivate and isWithATV then 100
isPrivate (but not isWithATV) then 10
isWithATV (but not isPrivate) then 50
Not isPrivate neither isWithATV then 5.
And then multiplies that number for the number of Adults. (the same logic applies to Children)
The updated code would be like:
function calculateTotal() {
const privateAdultPrice = 0;
const sharedAdultPrice = 0;
const privateChildrenPrice = 0;
const sharedChildrenPrice = 0;
const withAtvAdultPrice = 100;
const withAtvChildrenPrice = 80;
const noAtvPrice = 10;
const adults = +document.querySelector('#adults').value;
const children = +document.querySelector('#children').value;
const isPrivate = document.getElementById('private').checked;
const isWithAtv = document.getElementById('withatv').checked;
const adultTripPrice = isPrivate && isWithAtv ? 100 : isPrivate ? 10 : isWithAtv ? 50 : 5;
const childrenTripPrice = isPrivate && isWithAtv ? 50 : isPrivate ? 5 : isWithAtv ? 25 : 3;
const adultPrice = adults * (adultTripPrice)
const childrenPrice = children * (childrenTripPrice)
return adultPrice + childrenPrice;
}
function updateTotal() {
const total = calculateTotal();
console.log(total);
document.querySelector('#totalPrice').innerHTML = total;
}
function increaseCount(e, el) {
var input = el.previousElementSibling;
var value = parseInt(input.value, 10);
value = isNaN(value) ? 0 : value;
value++;
input.value = value;
updateTotal();
}
function decreaseCount(e, el) {
var input = el.nextElementSibling;
var value = parseInt(input.value, 10);
if (value > 1) {
value = isNaN(value) ? 0 : value;
value--;
input.value = value;
}
updateTotal();
}
function decreaseCount2(e, el) {
var input = el.nextElementSibling;
var value = parseInt(input.value, 10);
if (value > 0) {
value = isNaN(value) ? 0 : value;
value--;
input.value = value;
}
updateTotal();
}
var MainImg = document.getElementById('MainImg');
var smallimg = document.getElementsByClassName('small-img');
smallimg[0].onclick = function () {
MainImg.src = smallimg[0].src;
};
smallimg[1].onclick = function () {
MainImg.src = smallimg[1].src;
};
smallimg[2].onclick = function () {
MainImg.src = smallimg[2].src;
};
smallimg[3].onclick = function () {
MainImg.src = smallimg[3].src;
};
<!DOCTYPE html>
<html lang="en">
<head>
<title>Title</title>
<!-- Required meta tags -->
<meta charset="utf-8" />
<meta
name="viewport"
content="width=device-width, initial-scale=1, shrink-to-fit=no"
/>
<!-- Bootstrap CSS -->
<link
rel="stylesheet"
href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css"
integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T"
crossorigin="anonymous"
/>
<style>
.small-img-group {
display: flex;
justify-content: space-between;
}
.small-img-col {
flex-basis: 24%;
cursor: pointer;
}
.counter1 {
float: left;
display: flex;
justify-content: space-between;
overflow-x: hidden;
overflow-y: hidden;
}
.counter2 {
float: left;
display: flex;
justify-content: space-between;
overflow-x: hidden;
overflow-y: hidden;
padding-left: 15px;
}
.up,
.down {
display: inline-block;
color: rgb(0, 0, 0);
font-size: 20px;
margin: 1px 1px;
cursor: pointer;
width: 15px;
line-height: 14px;
height: 16px;
text-align: center;
font-weight: bold;
border: 1px solid #000;
user-select: none;
}
.up:hover,
.down:hover {
color: #fd0b3f;
text-align: center;
}
.adults {
padding-right: 5px;
}
.children {
padding-right: 5px;
}
input {
appearance: none;
height: 21px;
text-align: center;
width: 42px;
line-height: 24px;
font-size: 15px;
border-radius: 5px;
}
.container {
display: flex;
width: 2000px
}
input[type='radio'] {
display: none;
}
label[for='private'] {
position: relative;
color: orangered;
font-size: 20px;
border: 2px solid orangered;
border-radius: 5px;
align-items: left;
display: flex;
cursor: pointer;
margin-right: 10px;
}
label[for='shared'] {
position: relative;
color: orangered;
font-size: 20px;
border: 2px solid orangered;
border-radius: 5px;
align-items: left;
display: flex;
cursor: pointer;
}
label[for='withatv'] {
position: relative;
color: orangered;
font-size: 20px;
border: 2px solid orangered;
border-radius: 5px;
align-items: left;
display: flex;
cursor: pointer;
margin-right: 10px;
}
label[for='withoutatv'] {
position: relative;
color: orangered;
font-size: 20px;
border: 2px solid orangered;
border-radius: 5px;
align-items: left;
display: flex;
cursor: pointer;
}
input[type='radio']:checked + label {
background-color: orangered;
color: white;
}
input[type='radio']:checked + label:before {
height: 16px;
width: 16px;
border: 10px solid white;
background-color: orangered;
}
</style>
</head>
<body>
<section class="container sproduct my-5 pt-5">
<div class="row mt-5">
<div class="col-lg-5 col-md-12 col-12">
<img
class="img-fluid w-100 pb-1"
src="https://skylandtourism.com/wp-content/uploads/2018/03/Morning-Safari.jpg"
alt=""
id="MainImg"
width="450"
/>
<div class="small-img-group">
<div class="small-img-col">
<img
src="https://media.tacdn.com/media/attractions-splice-spp-674x446/09/99/99/87.jpg"
width="100%"
class="small-img"
alt=""
/>
</div>
<div class="small-img-col">
<img
src="https://skylandtourism.com/wp-content/uploads/2018/03/Morning-Safari.jpg"
width="100%"
class="small-img"
alt=""
/>
</div>
<div class="small-img-col">
<img
src="https://skylandtourism.com/wp-content/uploads/2018/03/Morning-Safari.jpg"
width="100%"
class="small-img"
alt=""
/>
</div>
<div class="small-img-col">
<img
src="https://skylandtourism.com/wp-content/uploads/2018/03/Morning-Safari.jpg"
width="100%"
class="small-img"
alt=""
/>
</div>
</div>
</div>
<div class="col-lg-6 col-md-12 col-12">
<h6>Home / Morning Safari</h6>
<h3>Morning Safari</h3>
<h2><label> Total:</label><label id="totalPrice"class="total Price"></label></h2>
<div class="counter1">
<label class="Adults">Adults</label>
<div class="down" onclick="decreaseCount(event, this)">-</div>
<input id="adults" type="text" value="1" readonly />
<div class="up" onclick="increaseCount(event, this)">+</div>
</div>
<div class="counter2">
<label class="Children">Children</label>
<div class="down" onclick="decreaseCount2(event, this)">-</div>
<input id="children" type="text" value="0" readonly />
<div class="up" onclick="increaseCount(event, this)">+</div>
</div>
<div class="container" style="padding-left: 0; padding-top: 5px">
<div>
<input
type="radio"
name="occupancy"
id="private"
checked="checked"
onclick="updateTotal()"
/>
<label for="private">Private</label>
<input
type="radio"
name="occupancy"
id="shared"
onclick="updateTotal()"
/>
<label for="shared">Shared</label>
</div>
<div>
<input
type="radio"
name="atv"
id="withatv"
checked="checked"
onclick="updateTotal()"
/>
<label for="withatv">With ATV</label>
<input
type="radio"
name="atv"
id="withoutatv"
onclick="updateTotal()"
/>
<label for="withoutatv">Without ATV</label>
</div>
</div>
</div>
</div>
</section>
<!-- Optional JavaScript -->
<!-- jQuery first, then Popper.js, then Bootstrap JS -->
<script
src="https://code.jquery.com/jquery-3.3.1.slim.min.js"
integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo"
crossorigin="anonymous"
></script>
<script
src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js"
integrity="sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1"
crossorigin="anonymous"
></script>
<script
src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"
integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM"
crossorigin="anonymous"
></script>
<script>
</script>
</body>
</html>
My submit button is disable. I want to enable it once the date and location fields have been entered. I have tried the following function, but it is not working.
function testFinish(){
var datepicker = document.getElementById('datepicker');
var location = document.querySelector('location');
var btn = document.getElementById('btn');
if (location.value && datepicker.value)
btn.disabled = false;
}
<!doctype html>
<html lang="en">
<head>
<title>Title</title>
<!-- Required meta tags -->
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<!-- Bootstrap CSS -->
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
<script src="https://js.stripe.com/v3/"></script>
<style>
.small-img-group {
display: flex;
justify-content: space-between;
}
.small-img-col {
flex-basis: 24%;
cursor: pointer;
}
.counter1 {
float: left;
display: flex;
justify-content: space-between;
overflow-x: hidden;
overflow-y: hidden;
}
.counter2 {
float: left;
display: flex;
justify-content: space-between;
overflow-x: hidden;
overflow-y: hidden;
padding-left: 15px;
}
.up,
.down {
display: inline-block;
color: rgb(0, 0, 0);
font-size: 29px;
margin: 1px 1px;
cursor: pointer;
width: 23px;
line-height: 14px;
height: 26px;
text-align: center;
font-weight: bold;
border: 1px solid orangered;
user-select: none;
}
.ui-state-highlight, .ui-widget-content .ui-state-highlight, .ui-widget-header .ui-state-highlight {
border: 1px solid #dad55e;
background: orangered;
color: #ffffff;
}
.up:hover,
.down:hover {
color: #fd0b3f;
text-align: center;
}
.adults {
padding-right: 5px;
}
.children {
padding-right: 5px;
}
input {
appearance: none;
height: 28px;
text-align: center;
width: 63px;
line-height: 24px;
font-size: 20px;
border-radius: 5px;
border-color: orangered;
}
input[type="radio"] {
display: none;
}
label[for=private] {
position: relative;
color: orangered;
font-size: 20px;
border: 2px solid orangered;
border-radius: 5px;
align-items: left;
display: flex;
cursor: pointer;
margin-right: 10px;
}
label[for=shared] {
position: relative;
color: orangered;
font-size: 20px;
border: 2px solid orangered;
border-radius: 5px;
align-items: left;
display: flex;
cursor: pointer;
}
label[for=withatv] {
position: relative;
color: orangered;
font-size: 20px;
border: 2px solid orangered;
border-radius: 5px;
align-items: left;
display: flex;
cursor: pointer;
margin-right: 10px;
}
label[for=withoutatv] {
position: relative;
color: orangered;
font-size: 20px;
border: 2px solid orangered;
border-radius: 5px;
align-items: left;
display: flex;
cursor: pointer;
}
input[type="radio"]:checked+label {
background-color: orangered;
color: white;
}
input[type="radio"]:checked+label:before {
height: 16px;
width: 16px;
border: 10px solid white;
background-color: orangered;
}
</style>
</head>
<body>
<section class="container sproduct my-5 pt-5">
<div class="row mt-5">
<div class="col-lg-5 col-md-12 col-12">
<img class="img-fluid w-100 pb-1" src="https://skylandtourism.com/wp-content/uploads/2018/03/Morning-Safari.jpg" alt="" id="MainImg" width="450">
<div class="small-img-group">
<div class="small-img-col">
<img src="https://media.tacdn.com/media/attractions-splice-spp-674x446/09/99/99/87.jpg" width="100%" class="small-img" alt="">
</div>
<div class="small-img-col">
<img src="https://skylandtourism.com/wp-content/uploads/2018/03/Morning-Safari.jpg" width="100%" class="small-img" alt="">
</div>
<div class="small-img-col">
<img src="https://skylandtourism.com/wp-content/uploads/2018/03/Morning-Safari.jpg" width="100%" class="small-img" alt="">
</div>
<div class="small-img-col">
<img src="https://skylandtourism.com/wp-content/uploads/2018/03/Morning-Safari.jpg" width="100%" class="small-img" alt="">
</div>
</div>
</div>
<div class="col-lg-6 col-md-12 col-12">
<h6 style="padding-top: 20px;">Home / Morning Safari</h6>
<h3>Morning Safari</h3>
<h2><label> Total AED:</label><input type="number" id="amount"class="total Price" readonly></label></h2>
<p><input type="text" id="datepicker" style="width: 120px;" autocomplete="off" placeholder="Date" readonly/></p>
<div class="counter1">
<Label class="Adults">Adults</Label>
<div class='down' onclick='decreaseCount(event, this)'>-</div>
<input id="adults" type='text' value='1' readonly>
<div class='up' onclick='increaseCount(event, this)'>+</div>
</div>
<div class="counter2">
<Label class="Children">Children</Label>
<div class='down' onclick='decreaseCount2(event, this)'>-</div>
<input id="children" type='text' value='0' readonly>
<div class='up' onclick='increaseCount(event, this)'>+</div>
</div>
<div style="display: flex; width: 100%">
<input type="radio" name="occupancy" id="private" value="private" checked="checked" onclick="updateTotal()">
<label for="private" style="width: 74px;">Private</label>
<input type="radio" name="occupancy" id="shared" value="shared" onclick="updateTotal()">
<label for="shared" style="width: 74px;">Shared</label>
</div>
<div style="display: flex; width:100%">
<input type="radio" name="atv" id="withatv" checked="checked" onclick="updateTotal()">
<label for="withatv" style="width: 94px;">With ATV</label>
<input type="radio" name="atv" id="withoutatv" onclick="updateTotal()">
<label for="withoutatv" style="width: 119px;">Without ATV</label>
</div>
<div class="field">
<label for="cause">Cause</label>
<select id="cause">
<option value="cause-a">cause a</option>
<option value="cause-b">cause b</option>
</select>
</div>
<div class="field">
<label for="currency">Currency</label>
<select class="field" id="currency">
<option value="cad">CAD</option>
<option value="eur">EUR</option>
<option value="usd">USD</option>
</select>
</div>
<input class="location" type="text" placeholder="location" oninput="testFinish();">
<div class="field">
<button type="submit" id="btn" name="ik" disabled onsubmit="alert('SUBMITTED')">Donate</button>
</div>
</div>
</div>
</section>
<!-- Optional JavaScript -->
<!-- jQuery first, then Popper.js, then Bootstrap JS -->
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js" integrity="sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js" integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM" crossorigin="anonymous"></script>
<link rel="stylesheet" href="//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">
<link rel="stylesheet" href="jquery.ui.datepicker.mobile.css" />
<script src="jQuery.ui.datepicker.js"></script>
<script src="jquery.ui.datepicker.mobile.js"></script>
<script src="https://code.jquery.com/jquery-1.12.4.js"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
<script src="donate.js" charset="utf-8"></script>
<script>
function increaseCount(e, el) {
var input = el.previousElementSibling;
var value = parseInt(input.value, 10);
value = isNaN(value) ? 0 : value;
value++;
input.value = value;
updateTotal();
}
function decreaseCount(e, el) {
var input = el.nextElementSibling;
var value = parseInt(input.value, 10);
if (value > 1) {
value = isNaN(value) ? 0 : value;
value--;
input.value = value;
updateTotal();
}
}
function decreaseCount2(e, el) {
var input = el.nextElementSibling;
var value = parseInt(input.value, 10);
if (value > 0) {
value = isNaN(value) ? 0 : value;
value--;
input.value = value;
updateTotal();
}
}
$('#datepicker').datepicker({
minDate:0
})
var MainImg = document.getElementById('MainImg');
var smallimg = document.getElementsByClassName('small-img');
smallimg[0].onclick = function() {
MainImg.src = smallimg[0].src;
}
smallimg[1].onclick = function() {
MainImg.src = smallimg[1].src;
}
smallimg[2].onclick = function() {
MainImg.src = smallimg[2].src;
}
smallimg[3].onclick = function() {
MainImg.src = smallimg[3].src;
}
function calculateTotal() {
const privateAdultPrice = 100;
const sharedAdultPrice = 40;
const privateChildrenPrice = 50;
const sharedChildrenPrice = 30;
const withAtvAdultPrice = 100;
const withAtvChildrenPrice = 80;
const noAtvPrice = 0;
const adults = +document.querySelector('#adults').value;
const children = +document.querySelector('#children').value;
const isPrivate = document.getElementById('private').checked;
const isWithAtv = document.getElementById('withatv').checked;
const adultTripPrice = isPrivate ? privateAdultPrice : sharedAdultPrice;
const childrenTripPrice = isPrivate ? privateChildrenPrice : sharedChildrenPrice;
const adultVehiclePrice = isWithAtv ? withAtvAdultPrice : noAtvPrice;
const childrenVehiclePrice = isWithAtv ? withAtvChildrenPrice : noAtvPrice
const adultPrice = adults * (adultTripPrice + adultVehiclePrice)
const childrenPrice = children * (childrenTripPrice + childrenVehiclePrice)
return adultPrice + childrenPrice;
}
function updateTotal() {
const total = calculateTotal();
console.log(total);
document.querySelector('#amount').value = total;
}
updateTotal();
</script>
</body>
</html>
You had bunch of errors in your code.
First your selector for location input was wrong.
you need to provide an id and then get the element by the id.
you could also do that with class selector but that will confuse you more.
<input class="location" id="location" type="text" placeholder="location" onkeyup="testFinish();">
var location = document.querySelector('#location');
secondly you need to add event listener to the datepicker input as well (in case the user fills the location first and date picker later, the button will still be disabled.)
<input type="text" onchange="testFinish()" id="datepicker" style="width: 120px;" autocomplete="off" placeholder="Date" readonly />
Below is the working snippet.
function testFinish(){
var datepicker = document.getElementById('datepicker');
var location = document.querySelector('#location');
var btn = document.getElementById('btn');
if (location && location.value && datepicker.value)
btn.disabled = false;
}
<!doctype html>
<html lang="en">
<head>
<title>Title</title>
<!-- Required meta tags -->
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<!-- Bootstrap CSS -->
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css"
integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
<script src="https://js.stripe.com/v3/"></script>
<style>
.small-img-group {
display: flex;
justify-content: space-between;
}
.small-img-col {
flex-basis: 24%;
cursor: pointer;
}
.counter1 {
float: left;
display: flex;
justify-content: space-between;
overflow-x: hidden;
overflow-y: hidden;
}
.counter2 {
float: left;
display: flex;
justify-content: space-between;
overflow-x: hidden;
overflow-y: hidden;
padding-left: 15px;
}
.up,
.down {
display: inline-block;
color: rgb(0, 0, 0);
font-size: 29px;
margin: 1px 1px;
cursor: pointer;
width: 23px;
line-height: 14px;
height: 26px;
text-align: center;
font-weight: bold;
border: 1px solid orangered;
user-select: none;
}
.ui-state-highlight,
.ui-widget-content .ui-state-highlight,
.ui-widget-header .ui-state-highlight {
border: 1px solid #dad55e;
background: orangered;
color: #ffffff;
}
.up:hover,
.down:hover {
color: #fd0b3f;
text-align: center;
}
.adults {
padding-right: 5px;
}
.children {
padding-right: 5px;
}
input {
appearance: none;
height: 28px;
text-align: center;
width: 63px;
line-height: 24px;
font-size: 20px;
border-radius: 5px;
border-color: orangered;
}
input[type="radio"] {
display: none;
}
label[for=private] {
position: relative;
color: orangered;
font-size: 20px;
border: 2px solid orangered;
border-radius: 5px;
align-items: left;
display: flex;
cursor: pointer;
margin-right: 10px;
}
label[for=shared] {
position: relative;
color: orangered;
font-size: 20px;
border: 2px solid orangered;
border-radius: 5px;
align-items: left;
display: flex;
cursor: pointer;
}
label[for=withatv] {
position: relative;
color: orangered;
font-size: 20px;
border: 2px solid orangered;
border-radius: 5px;
align-items: left;
display: flex;
cursor: pointer;
margin-right: 10px;
}
label[for=withoutatv] {
position: relative;
color: orangered;
font-size: 20px;
border: 2px solid orangered;
border-radius: 5px;
align-items: left;
display: flex;
cursor: pointer;
}
input[type="radio"]:checked+label {
background-color: orangered;
color: white;
}
input[type="radio"]:checked+label:before {
height: 16px;
width: 16px;
border: 10px solid white;
background-color: orangered;
}
</style>
</head>
<body>
<section class="container sproduct my-5 pt-5">
<div class="row mt-5">
<div class="col-lg-5 col-md-12 col-12">
<img class="img-fluid w-100 pb-1"
src="https://skylandtourism.com/wp-content/uploads/2018/03/Morning-Safari.jpg" alt="" id="MainImg"
width="450">
<div class="small-img-group">
<div class="small-img-col">
<img src="https://media.tacdn.com/media/attractions-splice-spp-674x446/09/99/99/87.jpg"
width="100%" class="small-img" alt="">
</div>
<div class="small-img-col">
<img src="https://skylandtourism.com/wp-content/uploads/2018/03/Morning-Safari.jpg" width="100%"
class="small-img" alt="">
</div>
<div class="small-img-col">
<img src="https://skylandtourism.com/wp-content/uploads/2018/03/Morning-Safari.jpg" width="100%"
class="small-img" alt="">
</div>
<div class="small-img-col">
<img src="https://skylandtourism.com/wp-content/uploads/2018/03/Morning-Safari.jpg" width="100%"
class="small-img" alt="">
</div>
</div>
</div>
<div class="col-lg-6 col-md-12 col-12">
<h6 style="padding-top: 20px;">Home / Morning Safari</h6>
<h3>Morning Safari</h3>
<h2><label> Total AED:</label><input type="number" id="amount" class="total Price" readonly></label>
</h2>
<p><input type="text" onchange="testFinish()" id="datepicker" style="width: 120px;" autocomplete="off" placeholder="Date"
readonly /></p>
<div class="counter1">
<Label class="Adults">Adults</Label>
<div class='down' onclick='decreaseCount(event, this)'>-</div>
<input id="adults" type='text' value='1' readonly>
<div class='up' onclick='increaseCount(event, this)'>+</div>
</div>
<div class="counter2">
<Label class="Children">Children</Label>
<div class='down' onclick='decreaseCount2(event, this)'>-</div>
<input id="children" type='text' value='0' readonly>
<div class='up' onclick='increaseCount(event, this)'>+</div>
</div>
<div style="display: flex; width: 100%">
<input type="radio" name="occupancy" id="private" value="private" checked="checked"
onclick="updateTotal()">
<label for="private" style="width: 74px;">Private</label>
<input type="radio" name="occupancy" id="shared" value="shared" onclick="updateTotal()">
<label for="shared" style="width: 74px;">Shared</label>
</div>
<div style="display: flex; width:100%">
<input type="radio" name="atv" id="withatv" checked="checked" onclick="updateTotal()">
<label for="withatv" style="width: 94px;">With ATV</label>
<input type="radio" name="atv" id="withoutatv" onclick="updateTotal()">
<label for="withoutatv" style="width: 119px;">Without ATV</label>
</div>
<div class="field">
<label for="cause">Cause</label>
<select id="cause">
<option value="cause-a">cause a</option>
<option value="cause-b">cause b</option>
</select>
</div>
<div class="field">
<label for="currency">Currency</label>
<select class="field" id="currency">
<option value="cad">CAD</option>
<option value="eur">EUR</option>
<option value="usd">USD</option>
</select>
</div>
<input class="location" id="location" type="text" placeholder="location" onkeyup="testFinish();">
<div class="field">
<button type="submit" id="btn" name="ik" disabled onsubmit="alert('SUBMITTED')">Donate</button>
</div>
</div>
</div>
</section>
<!-- Optional JavaScript -->
<!-- jQuery first, then Popper.js, then Bootstrap JS -->
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js"
integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo"
crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js"
integrity="sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1"
crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"
integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM"
crossorigin="anonymous"></script>
<link rel="stylesheet" href="//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">
<link rel="stylesheet" href="jquery.ui.datepicker.mobile.css" />
<script src="jQuery.ui.datepicker.js"></script>
<script src="jquery.ui.datepicker.mobile.js"></script>
<script src="https://code.jquery.com/jquery-1.12.4.js"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
<script src="donate.js" charset="utf-8"></script>
<script>
function increaseCount(e, el) {
var input = el.previousElementSibling;
var value = parseInt(input.value, 10);
value = isNaN(value) ? 0 : value;
value++;
input.value = value;
updateTotal();
}
function decreaseCount(e, el) {
var input = el.nextElementSibling;
var value = parseInt(input.value, 10);
if (value > 1) {
value = isNaN(value) ? 0 : value;
value--;
input.value = value;
updateTotal();
}
}
function decreaseCount2(e, el) {
var input = el.nextElementSibling;
var value = parseInt(input.value, 10);
if (value > 0) {
value = isNaN(value) ? 0 : value;
value--;
input.value = value;
updateTotal();
}
}
$('#datepicker').datepicker({
minDate: 0
})
var MainImg = document.getElementById('MainImg');
var smallimg = document.getElementsByClassName('small-img');
smallimg[0].onclick = function () {
MainImg.src = smallimg[0].src;
}
smallimg[1].onclick = function () {
MainImg.src = smallimg[1].src;
}
smallimg[2].onclick = function () {
MainImg.src = smallimg[2].src;
}
smallimg[3].onclick = function () {
MainImg.src = smallimg[3].src;
}
function calculateTotal() {
const privateAdultPrice = 100;
const sharedAdultPrice = 40;
const privateChildrenPrice = 50;
const sharedChildrenPrice = 30;
const withAtvAdultPrice = 100;
const withAtvChildrenPrice = 80;
const noAtvPrice = 0;
const adults = +document.querySelector('#adults').value;
const children = +document.querySelector('#children').value;
const isPrivate = document.getElementById('private').checked;
const isWithAtv = document.getElementById('withatv').checked;
const adultTripPrice = isPrivate ? privateAdultPrice : sharedAdultPrice;
const childrenTripPrice = isPrivate ? privateChildrenPrice : sharedChildrenPrice;
const adultVehiclePrice = isWithAtv ? withAtvAdultPrice : noAtvPrice;
const childrenVehiclePrice = isWithAtv ? withAtvChildrenPrice : noAtvPrice
const adultPrice = adults * (adultTripPrice + adultVehiclePrice)
const childrenPrice = children * (childrenTripPrice + childrenVehiclePrice)
return adultPrice + childrenPrice;
}
function updateTotal() {
const total = calculateTotal();
console.log(total);
document.querySelector('#amount').value = total;
}
updateTotal();
</script>
</body>
</html>
I want multiple radio checkboxes. In one line it should be private or shared and in the second line, it should be with ATV or Without ATV so people on my web can select shared and with ATV or many variables. so basically two selections are needed and 4four checkboxes are divided into two groups.
<!doctype html>
<html lang="en">
<head>
<title>Title</title>
<!-- Required meta tags -->
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<!-- Bootstrap CSS -->
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
<style>
.small-img-group {
display: flex;
justify-content: space-between;
}
.small-img-col {
flex-basis: 24%;
cursor: pointer;
}
.counter1 {
float: left;
display: flex;
justify-content: space-between;
overflow-x: hidden;
overflow-y: hidden;
}
.counter2 {
float: left;
display: flex;
justify-content: space-between;
overflow-x: hidden;
overflow-y: hidden;
padding-left: 15px;
}
.up,
.down {
display: inline-block;
color: rgb(0, 0, 0);
font-size: 20px;
margin: 1px 1px;
cursor: pointer;
width: 15px;
line-height: 14px;
height: 16px;
text-align: center;
font-weight: bold;
border: 1px solid #000;
user-select: none;
}
.up:hover,
.down:hover {
color: #fd0b3f;
text-align: center;
}
.adults {
padding-right: 5px;
}
.children {
padding-right: 5px;
}
input {
appearance: none;
height: 21px;
text-align: center;
width: 42px;
line-height: 24px;
font-size: 15px;
border-radius: 5px;
}
.container {
display: flex;
}
input[type="radio"] {
display: none;
}
label[for=private] {
position: relative;
color: orangered;
font-size: 20px;
border: 2px solid orangered;
border-radius: 5px;
align-items: left;
display: flex;
cursor: pointer;
margin-right: 10px;
}
label[for=shared] {
position: relative;
color: orangered;
font-size: 20px;
border: 2px solid orangered;
border-radius: 5px;
align-items: left;
display: flex;
cursor: pointer;
}
input[type="radio"]:checked+label {
background-color: orangered;
color: white;
}
input[type="radio"]:checked+label:before {
height: 16px;
width: 16px;
border: 10px solid white;
background-color: orangered;
}
</style>
</head>
<body>
<section class="container sproduct my-5 pt-5">
<div class="row mt-5">
<div class="col-lg-5 col-md-12 col-12">
<img class="img-fluid w-100 pb-1" src="https://skylandtourism.com/wp-content/uploads/2018/03/Morning-Safari.jpg" alt="" id="MainImg" width="450">
<div class="small-img-group">
<div class="small-img-col">
<img src="https://media.tacdn.com/media/attractions-splice-spp-674x446/09/99/99/87.jpg" width="100%" class="small-img" alt="">
</div>
<div class="small-img-col">
<img src="https://skylandtourism.com/wp-content/uploads/2018/03/Morning-Safari.jpg" width="100%" class="small-img" alt="">
</div>
<div class="small-img-col">
<img src="https://skylandtourism.com/wp-content/uploads/2018/03/Morning-Safari.jpg" width="100%" class="small-img" alt="">
</div>
<div class="small-img-col">
<img src="https://skylandtourism.com/wp-content/uploads/2018/03/Morning-Safari.jpg" width="100%" class="small-img" alt="">
</div>
</div>
</div>
<div class="col-lg-6 col-md-12 col-12">
<h6>Home / Morning Safari</h6>
<h3>Morning Safari</h3>
<h2> <label> Total:</label><label class="total Price"></label> </h2>
<div class="counter1">
<Label class="Adults">Adults</Label>
<div class='down' onclick='decreaseCount(event, this)'>-</div>
<input type='text' value='1' readonly>
<div class='up' onclick='increaseCount(event, this)'>+</div>
</div>
<div class="counter2">
<Label class="Children">Children</Label>
<div class='down' onclick='decreaseCount2(event, this)'>-</div>
<input type='text' value='0' readonly>
<div class='up' onclick='increaseCount(event, this)'>+</div>
</div>
<div class="container" style="padding-left: 0;padding-top: 5px;">
<div>
<input type="radio" name="occupancy" id="private" checked="checked">
<label for="private">Private</label>
<input type="radio" name="occupancy" id="shared">
<label for="shared">Shared</label>
</div>
<div>
<input type="radio" name="atv" id="withatv" checked="checked">
<label for="withatv">With ATV</label>
<input type="radio" name="atv" id="withoutatv">
<label for="withoutatv">Without ATV</label>
</div>
</div>
</div>
</div>
</section>
<!-- Optional JavaScript -->
<!-- jQuery first, then Popper.js, then Bootstrap JS -->
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js" integrity="sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js" integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM" crossorigin="anonymous"></script>
<script>
function increaseCount(e, el) {
var input = el.previousElementSibling;
var value = parseInt(input.value, 10);
value = isNaN(value) ? 0 : value;
value++;
input.value = value;
}
function decreaseCount(e, el) {
var input = el.nextElementSibling;
var value = parseInt(input.value, 10);
if (value > 1) {
value = isNaN(value) ? 0 : value;
value--;
input.value = value;
}
}
function decreaseCount2(e, el) {
var input = el.nextElementSibling;
var value = parseInt(input.value, 10);
if (value > 0) {
value = isNaN(value) ? 0 : value;
value--;
input.value = value;
}
}
var MainImg = document.getElementById('MainImg');
var smallimg = document.getElementsByClassName('small-img');
smallimg[0].onclick = function() {
MainImg.src = smallimg[0].src;
}
smallimg[1].onclick = function() {
MainImg.src = smallimg[1].src;
}
smallimg[2].onclick = function() {
MainImg.src = smallimg[2].src;
}
smallimg[3].onclick = function() {
MainImg.src = smallimg[3].src;
}
</script>
</body>
</html>
Hi, I want multiple radio checkboxes. In one line it should be private or shared and in the second line it should be with ATV or Without ATV so people on my web can select shared and with ATV or many variables. so basically two selections are needed and 4four checkboxes are divided into two groups.
edited
i did what you said in comment it looks like this and its not same as private and shared
The name tags on your ATV checkboxes should be changed from "occupancy" to something else like "atv". You could also wrap each group of inputs in separate divs if you want them to appear in separate rows. Finally you should also make your ids unique and update you label for tags so:
<div class="container style1" style="padding-left: 0;padding-top: 5px;">
<div class="">
<input type="radio" name="occupancy" id="private" checked="checked">
<label for="private">Private</label>
<input type="radio" name="occupancy" id="shared">
<label for="shared">Shared</label>
</div>
<div>
<input type="radio" name="atv" id="withatv" checked="checked">
<label for="withatv">With ATV</label>
<input type="radio" name="atv" id="withoutatv">
<label for="withoutatv">Without ATV</label>
</div>
</div>
I added a style1 class to your container but maybe you might want to add that style directly to .container. Anyway add these styles:
.style1{
flex-direction:column;
}
label[for="private"], label[for="shared"] { {
display: inline-block;
}
as you can see I have one main image and another image below the main one but when I click any of them my main image doesn't change to any of them what can be the issue, please identify. if you can edit and send me an amende code will be helpful pls.I don't see any sort of error maybe you can find out , to be honest, i am not techy doing this to learn something new
<!doctype html>
<html lang="en">
<head>
<title>Title</title>
<!-- Required meta tags -->
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<!-- Bootstrap CSS -->
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
<style>
.small-img-group{
display: flex;
justify-content: space-between;
}
.small-img-col{
flex-basis: 24%;
cursor: pointer;
}
.counter1 {
float: left;
display: flex;
justify-content: space-between;
overflow-x: hidden;
overflow-y: hidden;
}
.counter2 {
float: left;
display: flex;
justify-content: space-between;
overflow-x: hidden;
overflow-y: hidden;
padding-left: 15px;
}
.up, .down {
display: inline-block;
color: rgb(0, 0, 0);
font-size: 20px;
margin: 1px 1px;
cursor: pointer;
width: 15px;
line-height: 14px;
height: 16px;
text-align: center;
font-weight: bold;
border: 1px solid #000;
user-select: none;
}
.up:hover, .down:hover {
color: #fd0b3f;
text-align: center;
}
.adults {
padding-right: 5px;
}
.children {
padding-right: 5px;
}
input {
appearance: none;
height: 21px;
text-align: center;
width: 42px;
line-height: 24px;
font-size: 15px;
border-radius: 5px;
}
.container {
display: flex;
}
input[type="radio"]{
display: none;
}
label[for=private] {
position: relative;
color: orangered;
font-size: 20px;
border: 2px solid orangered;
border-radius: 5px;
align-items: left;
display: flex;
cursor: pointer;
margin-right: 10px;
}
label[for=shared] {
position: relative;
color: orangered;
font-size: 20px;
border: 2px solid orangered;
border-radius: 5px;
align-items: left;
display: flex;
cursor: pointer;
}
input[type="radio"]:checked + label{
background-color: orangered;
color: white;
}
input[type="radio"]:checked + label:before{
height: 16px;
width: 16px;
border: 10px solid white;
background-color: orangered;
}
</style>
<script>
function increaseCount(e, el) {
var input = el.previousElementSibling;
var value = parseInt(input.value, 10);
value = isNaN(value) ? 0 : value;
value++;
input.value = value;
}
function decreaseCount(e, el) {
var input = el.nextElementSibling;
var value = parseInt(input.value, 10);
if (value > 1) {
value = isNaN(value) ? 0 : value;
value--;
input.value = value;
}
}
function decreaseCount2(e, el) {
var input = el.nextElementSibling;
var value = parseInt(input.value, 10);
if (value > 0) {
value = isNaN(value) ? 0 : value;
value--;
input.value = value;
}
}
</script>
<script>
var MainImg = document.getElementById('MainImg');
var smallimg = document.getElementsByClassName('small-img');
smallimg[0].onclick = function() {
MainImg.src = smallimg[0].src;
}
smallimg[1].onclick = function() {
MainImg.src = smallimg[1].src;
}
smallimg[2].onclick = function() {
MainImg.src = smallimg[2].src;
}
smallimg[3].onclick = function() {
MainImg.src = smallimg[3].src;
}
</script>
</head>
<body>
<section class="container sproduct my-5 pt-5">
<div class="row mt-5">
<div class="col-lg-5 col-md-12 col-12">
<img class="img-fluid w-100 pb-1" src="https://skylandtourism.com/wp-content/uploads/2018/03/Morning-Safari.jpg" alt="" id="MainImg" width="450">
<div class="small-img-group">
<div class="small-img-col">
<img src="https://media.tacdn.com/media/attractions-splice-spp-674x446/09/99/99/87.jpg" width="100%" class="small-img" alt="">
</div>
<div class="small-img-col">
<img src="https://skylandtourism.com/wp-content/uploads/2018/03/Morning-Safari.jpg" width="100%" class="small-img" alt="">
</div>
<div class="small-img-col">
<img src="https://skylandtourism.com/wp-content/uploads/2018/03/Morning-Safari.jpg" width="100%" class="small-img" alt="">
</div>
<div class="small-img-col">
<img src="https://skylandtourism.com/wp-content/uploads/2018/03/Morning-Safari.jpg" width="100%" class="small-img" alt="">
</div>
</div>
</div>
<div class="col-lg-6 col-md-12 col-12">
<h6>Home / Morning Safari</h6>
<h3>Morning Safari</h3>
<h2> <label> Total:</label><label class="total Price"></label> </h2>
<div class="counter1">
<Label class="Adults">Adults</Label>
<div class='down' onclick='decreaseCount(event, this)'>-</div>
<input type='text' value='1' readonly>
<div class='up' onclick='increaseCount(event, this)'>+</div>
</div>
<div class="counter2">
<Label class="Children">Children</Label>
<div class='down' onclick='decreaseCount2(event, this)'>-</div>
<input type='text' value='0' readonly>
<div class='up' onclick='increaseCount(event, this)'>+</div>
</div>
<div class="container" style="padding-left: 0;padding-top: 5px;">
<input type="radio" name="occupancy" id="private" checked="checked">
<label for="private">Private</label>
<input type="radio" name="occupancy" id="shared">
<label for="shared">Shared</label>
</div>
</div>
</div>
</section>
<!-- Optional JavaScript -->
<!-- jQuery first, then Popper.js, then Bootstrap JS -->
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js" integrity="sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js" integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM" crossorigin="anonymous"></script>
</body>
</html>
basically your script works, you just need to move your script (the one with the images onclick functions) to the bottom of your file, that way the html dom elements load on the page before the script does allowing it to attach the onclick event functions to the dom elements.
You're trying to retrieve the img element with id "MainImg" which doesn't yet exist since your javascript code loads before your html code, so you get something like MainImg[0] is undefined... Try to put your last script (preferably all scripts) just before the closing body tag
i have created this slider separate from your code just to show you an easy way to make one
i have used tailwind here
here's an example below hope it will help
var main = document.querySelector(".main"),
big = main.querySelector(".big"),
smalls = main.querySelectorAll(".each")
big.setAttribute("src",smalls[0].getAttribute("src"))
smalls.forEach(each=>{
each.onclick = function(){
smalls.forEach(ss=>ss.classList.remove("active"))
each.classList.add("active")
big.setAttribute("src",each.getAttribute("src"))
}
})
.active{opacity:1 !important;border:3px solid gray;}
.each{opacity: 0.5;}
<link href="https://unpkg.com/tailwindcss#^2/dist/tailwind.min.css" rel="stylesheet">
<div class="main">
<img class="big w-50">
<div class="smalls flex">
<img class="each cursor-pointer w-16 active" src="https://images.unsplash.com/photo-1557673272-b16d3b6c5a58?ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&ixlib=rb-1.2.1&auto=format&fit=crop&w=1170&q=80">
<img class="each cursor-pointer w-16" src="https://images.unsplash.com/photo-1542361345-6ef51494f677?ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&ixlib=rb-1.2.1&auto=format&fit=crop&w=1170&q=80">
<img class="each cursor-pointer w-16" src="https://images.unsplash.com/photo-1542361345-89e58247f2d5?ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&ixlib=rb-1.2.1&auto=format&fit=crop&w=1170&q=80">
<img class="each cursor-pointer w-16" src="https://images.unsplash.com/photo-1439668462223-e88f0ad95063?ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&ixlib=rb-1.2.1&auto=format&fit=crop&w=1170&q=80">
</div>
</div>
So I have made a function which changes my values in a "cart". Every input field has their one value and this is added or substracted on it's total on change of the input field. It looks like this:
And my code looks like this (yes I am gonna cleanup the html+css later, this is just for testing :-):
var extraValues = document.querySelectorAll("input[type=number]");
var extraTotal = 0;
Array.prototype.forEach.call(extraValues, function (extraValue) {
extraValue.addEventListener('change', function() {
var getExtraId = extraValue.id;
var extraLength = getExtraId.length;
var currentExtra = getExtraId.charAt(extraLength - 1);
var catId = "testKassabon" + currentExtra;
var extraSort = extraValue.parentElement.querySelector('label');
var extraPrice = extraValue.parentElement.querySelector('.extraPrice').innerText;
var totalPrice = extraPrice * this.value;
var showExtra = document.getElementById(catId);
showExtra.innerHTML = "<div style='display: flex; justify-content: space-between; margin-top: 10px;'><div>" + this.value + "x " + extraSort.innerText + "</div><div style='color: #EC008C; font-weight: 700; font-size: 16px;'>€ " + totalPrice + "</div></div>";
})
});
.col-form-label {
font-weight: 700;
display: block;
width: 100%;
padding-bottom: 5px;
}
<div style="display: flex; justify-content: space-between; max-width: 600px;">
<div>
<div class="item" style="width: 200px; margin-bottom: 20px;">
<span class="extraPrice" style="display: none;">7.50</span>
<label class="col-form-label" style="font-weight: 700;">3-gangendiner</label>
<input type="number" id="extra1" class="form-control" style="max-width: 70px;" value="0" min="0">
</div>
<div class="item" style="width: 200px; margin-bottom: 20px;">
<span class="extraPrice" style="display: none;">10</span>
<label class="col-form-label">Fietshuur</label>
<input type="number" id="extra2" class="form-control" style="max-width: 70px;" value="0" min="0">
</div>
<div class="item" style="width: 200px; margin-bottom: 20px;">
<span class="extraPrice" style="display: none;">2.50</span>
<label class="col-form-label">Uitgebreid ontbijtbuffet</label>
<input type="number" id="extra3" class="form-control" style="max-width: 70px;" value="0" min="0">
</div>
</div>
<div style="max-width: 300px; width: 100%; padding: 20px; background-color: #F7F7F7; border-radius: 4px; margin: 0px;">
<span style="color: #000; font-weight: 700; font-size: 20px; padding-bottom: 10px; display: block;">Uw totaalprijs</span>
<div style="display: flex; flex-direction: column; height: 100%; padding-bottom: 40px;">
<div id="testKassabon1"></div>
<div id="testKassabon2"></div>
<div id="testKassabon3" style="flex-grow: 1;"></div>
<div id="totalPrice"></div>
</div>
</div>
</div>
This works perfectly. But now I need to calculate the total amount of these 3 values each time one of the inputs changes, and show it in id="totalPrice". I have NO idea how to do this, since everytime I try this it just replaced the total pricing instead of adding or substracting it from the total. Does anyone know how to do this?
Try this Code man thanks :-)
function countProperties(obj) {
var count = 0;
for(var prop in obj) {
console.log(prop,obj)
if(obj.hasOwnProperty(prop))
count = count +obj[prop];
}
return count;
}
var total = {}
var extraValues = document.querySelectorAll("input[type=number]");
var extraTotal = 0;
Array.prototype.forEach.call(extraValues, function (extraValue) {
extraValue.addEventListener('change', function() {
var getExtraId = extraValue.id;
var extraLength = getExtraId.length;
var currentExtra = getExtraId.charAt(extraLength - 1);
var catId = "testKassabon" + currentExtra;
var extraSort = extraValue.parentElement.querySelector('label');
var extraPrice = extraValue.parentElement.querySelector('.extraPrice').innerText;
var totalPrice = extraPrice * this.value;
total[catId] = totalPrice
// var TotalCost = Object.values(total).reduce((a, b) //=> a + b, 0)
var TotalCost = countProperties(total)
console.log(TotalCost)
alert(TotalCost)
var showExtra = document.getElementById(catId);
showExtra.innerHTML = "<div style='display: flex; justify-content: space-between; margin-top: 10px;'><div>" + this.value + "x " + extraSort.innerText + "</div><div style='color: #EC008C; font-weight: 700; font-size: 16px;'>€ " + totalPrice + "</div></div>";
})
});
.col-form-label {
font-weight: 700;
display: block;
width: 100%;
padding-bottom: 5px;
}
<div style="display: flex; justify-content: space-between; max-width: 600px;">
<div>
<div class="item" style="width: 200px; margin-bottom: 20px;">
<span class="extraPrice" style="display: none;">7.50</span>
<label class="col-form-label" style="font-weight: 700;">3-gangendiner</label>
<input type="number" id="extra1" class="form-control" style="max-width: 70px;" value="0" min="0">
</div>
<div class="item" style="width: 200px; margin-bottom: 20px;">
<span class="extraPrice" style="display: none;">10</span>
<label class="col-form-label">Fietshuur</label>
<input type="number" id="extra2" class="form-control" style="max-width: 70px;" value="0" min="0">
</div>
<div class="item" style="width: 200px; margin-bottom: 20px;">
<span class="extraPrice" style="display: none;">2.50</span>
<label class="col-form-label">Uitgebreid ontbijtbuffet</label>
<input type="number" id="extra3" class="form-control" style="max-width: 70px;" value="0" min="0">
</div>
</div>
<div style="max-width: 300px; width: 100%; padding: 20px; background-color: #F7F7F7; border-radius: 4px; margin: 0px;">
<span style="color: #000; font-weight: 700; font-size: 20px; padding-bottom: 10px; display: block;">Uw totaalprijs</span>
<div style="display: flex; flex-direction: column; height: 100%; padding-bottom: 40px;">
<div id="testKassabon1"></div>
<div id="testKassabon2"></div>
<div id="testKassabon3" style="flex-grow: 1;"></div>
<div id="totalPrice"></div>
</div>
</div>
</div>
Solution
In this solution I have added a function to calculate the sum.
So when the value changes then I call at the end of your function.
The calculator which calculates the sum and insert it inside your text field.
var extraValues = document.querySelectorAll("input[type=number]");
// extraValues.forEach((elem)=>{
// elem.addEventListener('input', function (evt) {
// calculator();
// })
// });
Array.prototype.forEach.call(extraValues, function (extraValue) {
extraValue.addEventListener('change', function() {
var getExtraId = extraValue.id;
var extraLength = getExtraId.length;
var currentExtra = getExtraId.charAt(extraLength - 1);
var catId = "testKassabon" + currentExtra;
var extraSort = extraValue.parentElement.querySelector('label');
var extraPrice = extraValue.parentElement.querySelector('.extraPrice').innerText;
var totalPrice = extraPrice * this.value;
var showExtra = document.getElementById(catId);
showExtra.innerHTML = "<div style='display: flex; justify-content: space-between; margin-top: 10px;'><div>" + this.value + "x " + extraSort.innerText + "</div><div style='color: #EC008C; font-weight: 700; font-size: 16px;'>€ " + totalPrice + "</div></div>";
calculator()
})
});
function calculator(){
let prices = document.querySelectorAll('.extraPrice')
let sum = 0;
let fac = 0;
extraValues.forEach((elem, ind) =>{
fac = parseFloat(prices[ind].innerHTML)
sum += parseInt(elem.value) * fac;
})
document.getElementById("totalPrice").innerHTML = sum;
}
.col-form-label {
font-weight: 700;
display: block;
width: 100%;
padding-bottom: 5px;
}
<div style="display: flex; justify-content: space-between; max-width: 600px;">
<div>
<div class="item" style="width: 200px; margin-bottom: 20px;">
<span class="extraPrice" style="display: none;">7.50</span>
<label class="col-form-label" style="font-weight: 700;">3-gangendiner</label>
<input type="number" id="extra1" class="form-control" style="max-width: 70px;" value="0" min="0">
</div>
<div class="item" style="width: 200px; margin-bottom: 20px;">
<span class="extraPrice" style="display: none;">10</span>
<label class="col-form-label">Fietshuur</label>
<input type="number" id="extra2" class="form-control" style="max-width: 70px;" value="0" min="0">
</div>
<div class="item" style="width: 200px; margin-bottom: 20px;">
<span class="extraPrice" style="display: none;">2.50</span>
<label class="col-form-label">Uitgebreid ontbijtbuffet</label>
<input type="number" id="extra3" class="form-control" style="max-width: 70px;" value="0" min="0">
</div>
</div>
<div style="max-width: 300px; width: 100%; padding: 20px; background-color: #F7F7F7; border-radius: 4px; margin: 0px;">
<span style="color: #000; font-weight: 700; font-size: 20px; padding-bottom: 10px; display: block;">Uw totaalprijs</span>
<div style="display: flex; flex-direction: column; height: 100%; padding-bottom: 40px;">
<div id="testKassabon1"></div>
<div id="testKassabon2"></div>
<div id="testKassabon3" style="flex-grow: 1;"></div>
<div id="totalPrice"></div>
</div>
</div>
</div>