how can i change main image by clicking other thumbnail image

how can i change main image by clicking other thumbnail image - javascript

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>

Related

anchor do nothing after second index

I have a django-qcm with sections that change when clicking on anchors and using the scroll snap type property.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<style>
html{
scroll-behavior: smooth;
}
body{
background-color: #72a9d6;
color: white;
font-family: "Mont", sans-serif;
overflow: hidden;
}
section{
overflow: hidden;
height: 100vh;
/*overflow-y: scroll;*/
scroll-snap-type: y mandatory;
scroll-behavior: smooth;
}
.container{
padding: 5%;
display: grid;
position: relative;
justify-items: center;
gap: 3px;
scroll-snap-align: center;
height: 100%;
}
.question_title{
height: 50px;
font-size: 25px;
font-weight: 500;
text-align: center;
}
.space_title{
height: 150px;
}
.container_reps{
max-width: 30%;
display: flex;
flex-wrap: wrap;
justify-content: center;
column-count:2;
height: 20%;
}
.rep{
display: flex;
align-items: center;
border:1px solid white;
padding: 0 5px ;
max-width: 15%;
min-width: 250px;
border-radius: 5px;
cursor: pointer;
margin-top: 5px;
margin-bottom: 10px;
margin-left: 10px;
max-height: 40px;
}
.rep:hover{
background-color: rgba(255, 255, 255, 0.3);
}
.dot_rep{
background-color: #63c7f5;
border: 1px solid white;
color: white;
margin-right: 7px;
padding: 5px 10px;
border-radius: 5px;
}
.text_rep{
font-weight: 700;
}
.check{
margin-left: 40%;
}
</style>
<section>
<div id="1" class="container">
<div class="question_title">
<div class="space_title"></div>
<p>Question 1</p>
</div>
<div class="container_reps">
<div class="rep">
<span class="dot_rep">1</span><p class="text_rep">rep 1</p>
</div>
<div class="rep">
<span class="dot_rep">1</span><p class="text_rep"> rep 2</p>
</div>
<div class="rep">
<span class="dot_rep">1</span><p class="text_rep">rep3</p>
</div>
</div>
</div>
<div id="2" class="container">
<div class="question_title">
<div class="space_title"></div>
<p>Question 2</p>
</div>
<div class="container_reps">
<div class="rep">
<span class="dot_rep">1</span><p class="text_rep">rep 1</p>
</div>
<div class="rep">
<span class="dot_rep">1</span><p class="text_rep"> rep 2</p>
</div>
<div class="rep">
<span class="dot_rep">1</span><p class="text_rep">rep3</p>
</div>
</div>
</div>
<div id="3" class="container">
<div class="question_title">
<div class="space_title"></div>
<p>Question 3</p>
</div>
<div class="container_reps">
<div class="rep">
<span class="dot_rep">1</span><p class="text_rep">rep 1</p>
</div>
<div class="rep">
<span class="dot_rep">1</span><p class="text_rep"> rep 2</p>
</div>
<div class="rep">
<span class="dot_rep">1</span><p class="text_rep">rep3</p>
</div>
</div>
</div>
<div id="4" class="container">
<div class="question_title">
<div class="space_title"></div>
<p>Question 4</p>
</div>
<div class="container_reps">
<div class="rep">
<span class="dot_rep">1</span><p class="text_rep">rep 1</p>
</div>
<div class="rep">
<span class="dot_rep">1</span><p class="text_rep"> rep 2</p>
</div>
<div class="rep">
<span class="dot_rep">1</span><p class="text_rep">rep3</p>
</div>
</div>
</div>
</section>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
<script>
function scrollToAnchor(ind){
const aTag = $("#"+ind);
$('body,section').animate({scrollTop: aTag.offset().top},'slow');
}
//scrollToAnchor('2');
var container_page = document.getElementsByClassName('container')
const reps = document.getElementsByClassName('rep');
[].forEach.call(reps,function(rep){
$(rep).click(function(){
if(! rep.querySelector('.check')){
[].forEach.call(reps,function(repToDel){
if(repToDel.querySelector('.check')){
repToDel.querySelector('.check').remove()
$(repToDel).css("border", "1px solid white")
}
})
$(rep).last().append('<div class="check"><object data="{% static "img/Coin-Magpharm-V3.png" %}" width="20" > </object></div>');
$(rep).css("border", "2.5px solid white");
let x = parseInt($(rep).closest('.container').attr('id'))
//var y = x.toString()
console.log(x)
scrollToAnchor(x+1)
}
})
})
</script>
</body>
</html>
The first anchor works fine, but after the second nothing happens. The function scrollToAnchor(3) works fine when called in the console.
I tried to change different dom parameters to reach the container id and the int and str but nothing changes except errors.

The problem seems to be that you're getting the .container id, instead you might use the number of the clicked .rep.
Try something like this:
let x = parseInt($(rep).index()) + 1

You need to clean up your JS, in the link below you can find a solution with js and css with the same need, instagram stroies clone component. check this tutorial entire solution, well coded.

I fixed it with this code:
var container_page = document.getElementsByClassName('container')
const reps = document.getElementsByClassName('rep');
[].forEach.call(reps, function(rep) {
$(rep).click(function() {
if (!rep.querySelector('.check')) {
[].forEach.call(reps, function(repToDel) {
if (repToDel.querySelector('.check')) {
repToDel.querySelector('.check').remove()
$(repToDel).css("border", "1px solid white")
}
})
$(rep).last().append('<div class="check"><object data="{% static "img/Coin-Magpharm-V3.png" %}" width="20" > </object></div>');
$(rep).css("border", "2.5px solid white");
var x = parseInt($(rep).closest('.container').attr('id'));
document.getElementById((++x).toString()).scrollIntoView({
behavior: 'smooth'
});

price depend on selection of radio input

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>

enable btn after date and input have been entered

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>

how can i add multiple radio checked in one column

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

calculate price depend on selection without button

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

We Keep Coding

JavaScript is the programming language of the Web.

how can i change main image by clicking other thumbnail image - javascript

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

Related

anchor do nothing after second index

price depend on selection of radio input

enable btn after date and input have been entered

how can i add multiple radio checked in one column

calculate price depend on selection without button

Categories

Resources