在javascript中更改输入数字时如何使值自动更新？

问题描述

这是一个 link to the tip calculator - 它托管在 netlify 上。

我使用 html、scss、javascript 创建了一个小费计算器。没有使用教程，所以我很自豪。我花了比我计划中更长的时间 waaayyyyy，但它已经完成了。不用说，我是一个完整的初学者。

无论如何，我需要一些帮助。

如果我在帐单输入中输入新的金额，我需要知道如何使数字自动更新。

例如，如果账单为 50 美元，而小费百分比为 50%，则小费金额为 25 美元。总共 75 美元。

但假设我打错了账单，所以我回去输入 60 美元，60 美元的 50% 是 30 美元。因此总帐单金额应自动更新为 90 美元。但是，当我更改帐单输入中的美元金额时，我无法弄清楚如何让所有这一切立即发生。

我有一种感觉，这与使用“更改”事件侦听器有关。但我不明白如何最好地实施它，或者这是否就是这里的答案。

// Upper Box Selections

const tipPercent = document.querySelector(".tip-percent");
const tipSlider = document.querySelector("#tip-slider");

tipSlider.oninput = function () {
    billInput = Number(document.querySelector("#bill-amt").value);
    tipPercent.innerHTML = this.value + "%";

    //discovered that number input type still returns a string
    //You can wrap multiple variables in parenthesis in order to append methods
    let tipAmount = document.querySelector(".tip-amount");
    // if a variable is referenced but not defined,it will be added to the window element - can Now use in second function
    tipTotal = Number((billInput * Number(this.value / 100)).toFixed(2));

    tipAmount.innerHTML = "$" + tipTotal.toFixed(2);

    const billTotal = document.querySelector(".bill-total");

    billForSplit = Number(billInput + tipTotal).toFixed(2);

    billTotal.innerHTML =
        "<strong>$</strong>" + "<strong>" + billForSplit + "</strong>";
};

// Bottom Box Selections

// -Grab slider value
const splitSlider = document.querySelector("#split-slider");

splitSlider.oninput = function () {
    // -Grab split person value-split PERSON for 1,people for more than 1
    const splitPeople = document.querySelector(".split-people");
    if (splitSlider.value <= 1) {
        splitPeople.innerHTML = splitSlider.value + " person";
    } else {
        splitPeople.innerHTML = splitSlider.value + " people";
    }
    // -grab tip per person value
    const splitTip = document.querySelector(".split-tip");
    // -grab total bill per person value
    const splitTotal = document.querySelector(".split-total");
    // - tip per person equals tipTotal / split slider value
    splitTip.innerHTML = "$" + (tipTotal / splitSlider.value).toFixed(2);
    // -total bill/person = billTotal / splitSlider.value
    splitTotal.innerHTML =
        "<strong>$</strong>" +
        "<strong>" +
        (billForSplit / splitSlider.value).toFixed(2) +
        "</strong>";
};

https://wonderful-meninsky-e0b1c7.netlify.app/

解决方法

您应该使用类似 calcTotal() 的名称声明该函数，该函数将在每次有账单和小费输入时运行：

const tipPercent = document.querySelector(".tip-percent");
const tipSlider = document.querySelector("#tip-slider");

function calcTotal() {
    billInput = Number(document.querySelector("#bill-amt").value);
    tipPercent.innerHTML = this.value + "%";

    //Discovered that number input type still returns a string
    //You can wrap multiple variables in parenthesis in order to append methods
    let tipAmount = document.querySelector(".tip-amount");
    // if a variable is referenced but not defined,it will be added to the window element - can now use in second function
    tipTotal = Number((billInput * Number(this.value / 100)).toFixed(2));

    tipAmount.innerHTML = "$" + tipTotal.toFixed(2);

    const billTotal = document.querySelector(".bill-total");

    billForSplit = Number(billInput + tipTotal).toFixed(2);

    billTotal.innerHTML =
        "<strong>$</strong>" + "<strong>" + billForSplit + "</strong>";
};
tipSlider.oninput = calcTotal;
document.querySelector("#bill-amt").oninput = calcTotal;