Javascript

Question

我正在使用从 frontendMentor 获得的小费计算器。这个应用程序的目的是把你的账单金额。单击小费百分比。添加人数。结果将显示在右侧，小费总额除以人数。

这个想法是作为按钮数组的onclick，有一个代表tip %的参数。通过点击其中之一，它会触发我的函数，并以正确的 tip% 显示到右侧的总金额。

我正在输入我的账单金额并点击按钮但没有任何反应。我什至没有可以调试的错误消息。

我是 Javascript 的新手，这项作业对我练习 DOM 操作非常有用。你的任何见解都会令人惊叹。谢谢！

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

注意： *来自前端导师。我会在应用程序中添加一个提交或输入按钮来触发计算。但我想按照指示去做。 *我还没有对每人的小费和重置按钮进行编码。会尝试自己做 *number people不能为0，我也会自己想办法。

Answer 1

为了让它正常工作，像这样更新你的 JS 文件

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

因为你直接在按钮上调用 total 函数，所以不需要添加注册事件处理程序的这一行

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

Answer 2

给你：

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

});

Javascript - 使用 onclick 事件将我在 HTML 中的输入值更改为我的函数结果

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

function

dom

user-input

addeventlistener