We Keep Coding

Vanilla JS budget app delete dynamically rendered income or expense

I've made a budgeting app that has expenses and Income tabs. Every time you add an expense or income, the app pushes the information inside of an array of objects and dynamically renders an <li> component and places it inside of a <ul>. I'm having trouble with the edit and delete features. Each individual <li> comes with a delete and edit button. The <li>, delete button, and edit button all have the same id of Date.now(). Date.now() is used because it produces a number based on milliseconds and won't produce the same id twice unless someone types an expense or income twice within one millisecond I want to click on the delete button inside of the <li> and have my app remove that individual object from my entry_list[] array and also remove the <li> from the DOM.
'use strict'
const balanceElement = document.querySelector(".balance .value");
const totalIncome = document.querySelector(".income-total");
const totalOutcome = document.querySelector(".outcome-total");
const incomeElement = document.querySelector(".income-tab");
const expense = document.querySelector(".expense-tab");
const all = document.querySelector(".all-tab");
const incomeList = document.querySelector(".income-tab .list");
const expenseList = document.querySelector(".expense-tab .list");
const allList = document.querySelector(".all-tab .list");
const expensesButton = document.querySelector(".tab1");
const incomeButton = document.querySelector(".tab2");
const allButton = document.querySelector(".tab3");
const addExpense = document.querySelector(".add-expense")
const expenseTitle = document.querySelector(".expense-title-input")
const expenseAmount = document.querySelector(".expense-amount-input")
const addIncome = document.querySelector(".add-income")
const incomeTitle = document.querySelector(".income-title-input")
const incomeAmount = document.querySelector(".income-amount-input")
const list = document.querySelector('.list')
//SWITCHING BETWEEN TABS
expensesButton.addEventListener('click', () => {
expense.classList.remove('hidden');
incomeElement.classList.add('hidden');
expensesButton.classList.add('clicked');
incomeButton.classList.remove('clicked');
})
incomeButton.addEventListener('click', () => {
incomeElement.classList.remove('hidden');
expense.classList.add('hidden');
expensesButton.classList.remove('clicked');
incomeButton.classList.add('clicked');
})
incomeList.addEventListener('click', deleteOrEdit)
expenseList.addEventListener('click', deleteOrEdit)
let entry_list = []
addExpense.addEventListener('click', () =>{
if(expenseTitle.value == '' || expenseAmount.value == ''){
return;
}
let expense = {
type: 'expense',
title: expenseTitle.value,
amount: expenseAmount.value,
id: Date.now()
}
entry_list.push(expense)
clearExpense()
changeLists()
})
addIncome.addEventListener('click', () =>{
if(incomeTitle.value == '' || incomeAmount.value == ''){
return;
}
let income = {
type: 'income',
title: incomeTitle.value,
amount: incomeAmount.value,
id: Date.now()
}
entry_list.push(income)
clearIncome()
changeLists()
})
const clearExpense = () =>{
expenseTitle.value = '';
expenseAmount.value = '';
}
const clearIncome = () =>{
incomeTitle.value = ''
incomeAmount.value = ''
}
const changeLists = () =>{
expenseList.innerHTML = ''
incomeList.innerHTML = ''
entry_list.map((entry) =>{
if(entry.type == 'expense'){
return expenseList.innerHTML += `<li id = "${entry.id}" class= "${entry.type}">
<div class = "entry">${entry.title}: $${entry.amount}</div>
<div class="icon-container">
<div class = "edit" id="${entry.id}"></div>
<div class ="delete" id="${entry.id}"></div>
</div>
</li>`
}
else if(entry.type == 'income'){
return incomeList.innerHTML += `<li id = "${entry.id}" class= "${entry.type}">
<div class = "entry">${entry.title}: $${entry.amount}</div>
<div class="icon-container">
<div class = "edit" id="${entry.id}"></div>
<div class ="delete" id="${entry.id}"></div>
</div>
</li>`
}
})
addIncomes()
}
const addIncomes = () =>{
let sum = 0;
let income = 0;
let outcome = 0;
balanceElement.innerHTML = 0
totalIncome.innerHTML = 0
totalOutcome.innerHTML = 0
entry_list.forEach(list =>{
if(list.type == 'expense'){
sum -= list.amount
outcome -= list.amount
}else if(list.type == 'income'){
sum += Number(list.amount)
income += Number(list.amount)
}
balanceElement.innerHTML = '$' + sum
totalIncome.innerHTML = '$' + income
totalOutcome.innerHTML = '$' + outcome
})
}
// // DETERMINE IF BUTTON IS EDIT OR DELETE
function deleteOrEdit(e){
const targetButton = e.target;
const entry = targetButton.parentNode.parentNode;
if(targetButton.classList == ('delete')){
deleteEntry(entry)
}else if(targetButton.classList == ('edit')){
editEntry(entry);
}
}
// //DELETE FUNCTION
const deleteEntry = (entry) =>{
console.log(entry.id)
entry_list.splice(entry.id, 1)
// entry.innerHTML = ''
console.log(entry.id)
addIncomes()
}
// EDIT FUNCTION
const editEntry = (entry) =>{
let Entry = entry_list[entry.id]
if(entry.type == "income"){
incomeAmount.value = Entry.amount;
incomeTitle.value = Entry.title;
}else if(entry.type == "expense"){
expenseAmount.value = Entry.amount;
expenseTitle.value = Entry.title;
}
deleteEntry(entry);
}
#import url('https://fonts.googleapis.com/css2?family=Open+Sans:wght#400;700&family=Raleway:wght#400;700&display=swap');
*{
margin: 0;
padding: 0;
box-sizing: border-box;
font-family: 'Open Sans', sans-serif;
}
input::-webkit-outer-spin-button,
input::-webkit-inner-spin-button {
-webkit-appearance: none;
margin: 0;
}
.budget-container{
display: flex;
align-items: center;
justify-content: center;
height: 100vh;
width: 100%;
background-color: #4F98CA;
}
.balance-container{
width: 360px;
height: 470px;
background-color: #50D890;
border-radius: 30px;
margin-right: 100px;
}
.app-title{
color: white;
margin-top: 1rem;
margin-left: 1rem;
}
.month{
color: white;
margin-top: 1rem;
text-align: center;
}
.budget-header{
display: flex;
flex-direction:column;
justify-content: center;
}
.balance{
margin-top: 1rem;
margin-left: 1rem;
}
.title{
color: white;
font-size: 1.25rem;
opacity: .75;
}
.value{
font-size: 1.75rem;
color: white;
font-weight: bold;
margin-left: 1rem;
}
.account{
margin-top: 2.5rem;
margin: 2.5rem 1.5rem 2.5rem 1.5rem;
display: flex;
justify-content: space-between
}
.income-total{
color: white;
text-align: center;
font-size: 1.5rem;
}
.outcome-total{
color: #4F98CA;
text-align: center;
font-size: 1.5rem;
}
/* DASHBOARD */
.budget-dashboard{
display: block;
width: 360px;
height: 470px;
position: relative;
border-radius: 30px;
background-color: white;
}
.dash-title{
margin-top: 2rem;
margin-left: 1rem;
font-size: 1.5rem;
}
.toggle{
margin: 1rem;
display: flex;
cursor: pointer;
}
.toggle .tab2, .tab3{
margin-left: 1rem;
cursor: pointer;
}
.clicked{
font-weight: bold !important;
}
.hidden{
display: none !important;
}
/* EXPENSES TAB */
.expense-tab{
display: flex;
justify-content: center;
}
.expense-input-container{
position: absolute;
top: 400px;
border-top: solid 1px gray;
width: 100%;
}
.expense-amount-input{
width: 125px;
border: none;
outline: none;
font-size: 1.25rem;
}
.expense-title-input{
width: 125px;
border: none;
outline: none;
font-size: 1.25rem;
}
.add-expense{
color: none;
background-color: none;
border: none;
outline: none;
color: inherit;
}
/* INCOME TAB */
.income-tab{
display: flex;
justify-content: center;
}
.income-input-container{
position: absolute;
top: 400px;
border-top: solid 1px gray;
width: 100%;
}
.input{
display: flex;
justify-content: space-between;
align-items: center;
margin: 1rem;
}
.income-amount-input{
width: 125px;
border: none;
outline: none;
font-size: 1.25rem;
}
.income-title-input{
width: 125px;
border: none;
outline: none;
font-size: 1.25rem;
}
.add-income{
color: none;
background-color: none;
border: none;
outline: none;
}
.plus-img{
width: 40px;
}
/* li */
ul{
width: 360px;
height: 255px;
list-style: none;
margin-top:20px;
overflow-x: auto;
}
/* BUTTON ICONS */
.edit{
background-image: url('media/Icons/icons8-edit-48.png');
background-size: contain;
width: 25px;
height: 25px;
background-repeat: no-repeat;
margin-right: 10px;
}
.delete{
background-image: url('media/Icons/icons8-trash-can-48 (2).png');
background-size: contain;
width:25px;
height: 25px;
background-repeat: no-repeat;
}
.income{
width:250px;
height: auto;
padding-left: 20px;
margin-bottom: 10px;;
word-wrap: break-word;
color: black
}
.expense{
width:250px;
height: auto;
padding-left: 20px;
margin-bottom: 10px;;
word-wrap: break-word;
font-family: 'Gilroy Bold';
color: #4F98CA;
}
li{
display: flex;
justify-content: space-between;
width: 100% !important;
padding-right: 20px;
}
.icon-container{
display: flex;
}
#media (max-width:900px){
.budget-container{
display: inline-block;
position: relative
}
.balance-container{
position: absolute;
top: 10%;
left: 25%;
}
.budget-dashboard{
position: absolute;
left: 25%;
top: 40%;
}
}
<!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">
<link rel="stylesheet" href="style.css">
<title>Budgetrr</title>
</head>
<body>
<main class="budget-container">
<section class="balance-container">
<div class="app-title">
<p>Budgetrr</p>
</div>
<h1 class="month">OCTOBER</h1>
<section class="budget-header">
<div class="balance">
<div class="title">
Balance
</div>
<div class="value">
<small>$</small>0
</div>
</div>
<div class="account">
<div class="budget-income">
<div class="title">
Income
</div>
<div class="income-total">
<small>$</small>0
</div>
</div>
<div class="chart"></div>
<div class="budgetoutcome">
<div class="title">
Expenses
</div>
<div class="outcome-total">
<small>$</small>0
</div>
</div>
</div>
</section>
</section>
<section class="budget-dashboard">
<div class="dash-title">Dashboard</div>
<div class="toggle">
<div class="tab1 clicked">Expenses</div>
<div class="tab2">Income</div>
<!-- <div class="tab3 clicked">All</div> -->
</div>
<div class="income-tab hidden">
<ul class="list"></ul>
<div class="income-input-container">
<form class="input">
<input type="text" class="income-title-input" name="title" placeholder="Title">
<input type="number" class="income-amount-input" name="amount" placeholder="$0">
<button type = "button" class="add-income"><img class= "plus-img"src="media/Icons/icons8-add-new-48.png" alt=""></button>
</form>
</div>
</div>
<div class = "expense-tab">
<ul class="list"></ul>
<div class="expense-input-container">
<div class="input">
<input type="text" class="expense-title-input" name="title" placeholder="Title">
<input type="number" class="expense-amount-input" name="amount" placeholder="$0">
<button type="button" class="add-expense"><img class= "plus-img" src="media/Icons/icons8-add-new-48.png" alt=""></button>
</div>
</div>
</div>
</section>
</main>
<script src="JavaScript/budget.js"></script>
</body>
</html>
I've tried to use .splice() but I can't seem to get it to work.

Your entry is an object. And entry has an id property with Date type.
Your delete function calls this:
entry_list.splice(entry.id, 1)
Javascript splice function
function takes number as argument(s).
You should find the id of element you want to delete and get its index. After that you can delete the element with splice method.
Here is how to delete:
// Find the index of object at the given list
const index = entry_list.findIndex(x => x.id === entry.id);
// Starting from index of element to delete, remove 1 element.
entry_list.splice(index, 1);

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

how can i change main image by clicking other thumbnail image

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>

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