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 100isPrivate (but not isWithATV) then 10isWithATV (but not isPrivate) then 50isPrivate 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>