My Project Cash Register Project

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')
}

The value in an input field is a string object. “5” * 5 is NaN.

okay how do I get it to output a value
ex. say a user inputted 5 for the price and how do I get the program to output 25 as the answer (5*5)

look up parseInt and parseFloat for JavaScript (because these functions can change stuff from strings to numbers).

1 Like

If we are to assume the user has typed in a number, then we can use the Number constructor on the string.

Number(sTotal) * 5

The other two suggested tools will work, but they are much more robust than simply casting. More horsepower than we need in the case of input from a form. If the user inputs anything that cannot be made into a number, the result will still be NaN.

Furthermore, JS has a unary operator, + that casts its operand to a ‘number’, and will result in the same NaN if not a number.

+sTotal * 5
2 Likes