Chrome App 输入功能简化

Question

我正在编写一个 chrome 应用程序来记录在项目上花费的使用时间，我有一组按钮，允许他们只使用 4 个快速按钮，每个按钮都有预设时间，例如 7.5 分钟、15 分钟、1 小时、4 小时。

这是为了鼓励用户提交尽可能接近实时的项目时间，同时使其更容易而不是打开网络应用程序。

这段代码基本上只是使用 4 个按钮将定义的时间添加到输入框 "hourTime"。

有没有办法不为每个按钮调用 4 个单独的函数并简化我的代码？我不是真正的 JS 大师，所以我相信我可以改进它。

非常感谢 Whosebug 的帮助。

//adds 7.5 minutes to the input    
function addbt1(){
  var b1 = ((1/8)+ Number(document.getElementById("hourTime").value));
  b1 = b1.toFixed(3);
  document.getElementById("hourTime").value = b1;
}
document.querySelector("#add1Funct").addEventListener("click", addbt1);
//adds 15 minutes to the input  
function addbt2(){
  var b2 = ((1/4)+ Number(document.getElementById("hourTime").value));
  b2 = b2.toFixed(3);
  document.getElementById("hourTime").value = b2;
}
document.querySelector("#add2Funct").addEventListener("click", addbt2);
//adds 1 hour to the input  
function addbt3(){
  var b3 = ((1)+ Number(document.getElementById("hourTime").value));
  b3 = b3.toFixed(3);
  document.getElementById("hourTime").value = b3;
}
document.querySelector("#add3Funct").addEventListener("click", addbt3);
//adds 4 hour to the input 
function addbt4(){
  var b4 = ((1*4)+ Number(document.getElementById("hourTime").value));
  b4 = b4.toFixed(3);
  document.getElementById("hourTime").value = b4;
}
document.querySelector("#add4Funct").addEventListener("click", addbt4);

Answer 1

接受 argument 附加处理程序函数，不同元素事件可能有所不同！

function addbt(val) { //accept argument as `val`
  document.getElementById("hourTime").value = (val + Number(document.getElementById("hourTime").value)).toFixed(3);
}
document.querySelector("#add1Funct").addEventListener("click", function() {
  addbt((1 / 8));
});
document.querySelector("#add2Funct").addEventListener("click", function() {
  addbt((1 / 4));
});
document.querySelector("#add3Funct").addEventListener("click", function() {
  addbt((1));
});
document.querySelector("#add4Funct").addEventListener("click", function() {
  addbt((1 * 4));
});

Chrome App 输入功能简化

Chrome App Input function simplify

html

javascript

google-chrome

google-chrome-app