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

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.

CodePudding user response：

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

CodePudding user response：

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

});

CodePudding user response：

If you type tipBtn[0] it'll return undefined. Because tipBtn was a dom object like :

<button class="tip"><button>

So if you tried to do tipBtn[0], it picks < as the value and the < doesn't mean anything so it'll return undefined. Then it doesn't do anything. Just replace tipBtn[0] to tipBtn and it should work.

tipBtn.addEventListener('click', total);

You should use the arrow function instead of function in this situation

tipBtn.addEventListener('click', (perc) => {
  totalResult = myBill*perc/100; totalAmount.value = totalResult;
});

Arrow function is basically another way of creating functions, you can search for more info about arrow function.