Javascript - Change the value of my input in HTML with the result of my function, using the onclick event

Question

I am doing this tip calculator I got from frontendMentor. The aim of this app is to put the amount of your bill. Click on a tip percentage. Add the number of people. The result will be displayed on the right side with the total amount of the tip, and that amount divided by the number of people.

The idea is the onclick which as an array of button, has a parameter that represents tip %. By clicking on one of them, it would trigger my function with the right tip% and display it to the Total amount on the right.

I am putting my bill amount and click on the button but nothing happens. I don't even have an error message I could debug.

I am new to Javascript, and this assignment was great for me to practice DOM manipulation. Any insight from you would be amazing. Thank you!

https://jsfiddle.net/SophQuin/extgo4w9/6/

let myBill = document.getElementById('amount').value;
let people = document.getElementById('quantity').value;
let customTip = document.getElementById('custom').value;
let tipBtn = document.getElementsByClassName('tip');
let totalAmount = document.getElementById('tip-amount').value;
let personAmount = document.getElementById('tip-person').value;

function total (perc) {
    totalResult = myBill*perc/100;
    totalAmount.value = totalResult;
};



tipBtn[0].addEventListener('click', total);

NOTE: *It is from Frontend Mentor. I would have add a submit or enter button added to the app to trigger the calculation. But I want to follow the instruction. *I haven't code the tip per person and the reset button yet. Will attempt to do that by myself *Number people cannot be 0, I will also try to figure out how to do that by myself.

Answer 1

For make it working update your JS file like this

let people = document.getElementById('quantity').value;
let customTip = document.getElementById('custom').value;
let tipBtn = document.getElementsByClassName('tip');
let totalAmount = document.getElementById('tip-amount');
let personAmount = document.getElementById('tip-person').value;

function total (perc) {
    let myBill = document.getElementById('amount').value;
    totalResult = myBill*perc/100;
    totalAmount.value = totalResult;
}

Since you're directly calling total function on button, so no need to add this line which is registering event handler

tipBtn[0].addEventListener('click', total);

Answer 2

Here you go:

let myBill = document.getElementById("amount");
let people = document.getElementById("quantity").value;
let customTip = document.getElementById("custom").value;
let tipBtn = document.querySelectorAll(".tip");
let totalAmount = document.getElementById("tip-amount");
let personAmount = document.getElementById("tip-person").value;

function total(perc) {
 let myBill = document.getElementById("amount").value;
 let totalResult = (myBill * perc) / 100;
 totalAmount.value = totalResult;
}

});