This is a personal project I am working on, I want the user to enter an Item, and then enter a price, when the user presses the calculate tax button I want the program to take the price and multiply it by 5 and then give an answer, then also calculate the “tax” + the price to get a total and have the total displayed in the total box.
I have googled how get the program to grab the price and multiply it by 5 when I do I keep getting NaN (not a number) or nothing happens. Not sure how I can grab the price and multiply it.
<!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="styles.css">
<script src="script.js"></script>
<title>Cash Register</title>
</head>
<body>
<header class="heading">
<h1>Welcome to the Store</h1>
</header>
<form action="">
<label for="item">Enter Item:</label>
<input type="text" id="item" name="item"><br>
<label for="price">Enter Price: $</label>
<input type="text" id="price" name="price"><br>
<label for="stotal">Subtotal: $</label>
<input type="text" id="sTotal" name="sTotal"><br>
<label for="tax">Tax:</label>
<p id="taxBtn">
<button onclick="tax();"> Calculate Tax</button>
<br><br>
<label for="total">Total:</label>
<input type="text" id="total" name="total"><br>
<p id="myBtn">
<button onclick="btn();"> Add Item </button>
</form>
</body>
</html>
JavaScript
//Subtotal gets the price and enters in substotal
window.onload = function() {
let price = document.getElementById("price"),
sTotal = document.getElementById("sTotal");
price.addEventListener('input', function() {
sTotal.value = price.value;
});
};
//calculates tax
function tax() {
const taxBtn = document.getElementById("price");
taxBtn.addEventListener('input', function() {
Total = sTotal * 5;
console.log(Total)
});
};
//Adding Items
function btn() {
const myBtn = document.getElementById('myBtn');
window.alert('Item Added')
}