Posted on Feb. 20, 2021, 8 p.m. by Bishal ( 11820)
.value
in JavaScript that will set the Total Value in the respective input field.
index.html
index.html
<!DOCTYPE html>
<html>
<head>
<title>Trip Budget Calculator JavaScript - Code With Bishal</title>
</head>
<!-- created by Code With Bishal - www.codewithbishal.com
-->
<body>
</body>
</html>
script.js
<head> </head>
of your HTML document:
<script src="script.js"></script>
script.js
file:
var total = document.getElementById("total");
total.addEventListener("click", () => {
let valTravel = parseInt(document.getElementById("travel").value);
let valHotel = parseInt(document.getElementById("hotel").value);
let valFood = parseInt(document.getElementById("food").value);
document.getElementById("total-money").value = valTravel + valHotel + valFood;
});
<!DOCTYPE html>
<html>
<head>
<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet">
<title>Trip Budget Calculator JavaScript - Code With Bishal</title>
</head>
<!-- created by Code With Bishal - www.codewithbishal.com
-->
<body class="p-4">
<label for="travel"><h4>Money spent on Travelling</h4></label>
<input type="number" id="travel" class="form-control" placeholder="Money spent for Travelling">
<label for="hotel"><h4>Money spent on Hotel</h4></label>
<input type="number" id="hotel" class="form-control" placeholder="Money spent at Hotel">
<label for="food"><h4>Money spent on Food</h4></label>
<input type="number" id="food" class="form-control" placeholder="Money spent For Food">
<label for="total"><h4>Total money spent</h4></label>
<input type="number" id="total-money" class="form-control" placeholder="Total money spent" readonly>
<div class="py-5 text-center">
<button type="button" id="total" class="btn btn-primary">Calculate Total</button>
</div>
</body>
</html>
var total = document.getElementById("total");
total.addEventListener("click", () => {
let valTravel = parseInt(document.getElementById("travel").value);
let valHotel = parseInt(document.getElementById("hotel").value);
let valFood = parseInt(document.getElementById("food").value);
document.getElementById("total-money").value = valTravel + valHotel + valFood;
});