Question

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

这是为了鼓励用户尽可能接近实时地提交项目时间，而不是打开网络应用程序。

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

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

Stackoverflow帮助将非常感激。

//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处理程序函数，这可能是附加了不同元素事件的差异！

＆＃13;

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

＆＃13;

Chrome应用输入功能简化

1 个答案: