Problem using parseFloat even though I am parsing a number, but still returing NaN
<div class="tip-custom" id="tip-custom"><input type="number" placeholder="CUSTOM"></div>
const tipCustom = document.querySelector(".tip-custom");
tipCustom.addEventListener("input", tipInputFun);
let tipValue = 0.15;
function tipInputFun() {
tipValue = parseFloat(tipCustom.value / 100);
console.log(tipValue);
}
Your querySelector looks for an element that has a class tip-custom.
In your code I see a div with id tip-custom (that is #tip-custom) and your input being inside the div.
You need to fix your selector to properly find the element with your text. You could do something like this
document.querySelector("#tip-custom>input");
Takes the first input, inside an element with id tip-custom.
const tipCustom = document.querySelector("#tip-custom>input");
tipCustom.addEventListener("input", tipInputFun);
let tipValue = 0.15;
function tipInputFun() {
tipValue = parseFloat(tipCustom.value / 100);
console.log(tipValue);
}<div class="tip-custom" id="tip-custom"><input type="number" placeholder="CUSTOM"></div>tipCustom is the div, not the input, so tipCustom.value is undefined.
Keep it simple and follow the good practices.
let tipValue = 0.15;
function tipInput() {
tipValue = parseFloat(this.value / 100);
console.log(tipValue);
}
document.querySelector(".tip-custom > input").addEventListener("input", tipInput);<div class="tip-custom" id="tip-custom"><input type="number" placeholder="CUSTOM"></div>