使用不同的输入运行类似的函数比仅编写同一函数的略有不同版本的更好的方法？

Question

只是想提高我的编码质量......可能是暴力强迫的 - 想知道是否有更有效的编码方法？任务：从 3 个 HTML 下拉列表中获取输入，然后传递用户输入 (m_px) 以从 googlesheet (drawx) 获取返回，然后将其写回网页。下面的工作正常...对于一个简单的任务来说似乎有很多代码/变量...我怎样才能更好地编码？例如 - 如何用单个函数替换 getDrawNumOne 到 Three？需要额外注意的是：在实际脚本中，这些函数会上升到 getDrawNumEight(!)。感谢您的建议/意见。

   document.getElementById("btn").addEventListener("click",doStuff);
   document.getElementById("m_p1").addEventListener("onchange",getDrawNumOne);
   document.getElementById("m_p2").addEventListener("onchange",getDrawNumTwo);
   document.getElementById("m_p3").addEventListener("onchange",getDrawNumThree);
   
function getDrawNumOne(){
var drawNumOne = document.getElementById("m_p1").value;
   google.script.run.withSuccessHandler(updateDrawNumOne).getDrawNo(drawNumOne); 
}
function updateDrawNumOne(drawNumReturnOne){
   document.getElementById("draw1").value = drawNumReturnOne;
}

function getDrawNumTwo(){
var drawNumTwo = document.getElementById("m_p2").value;
   google.script.run.withSuccessHandler(updateDrawNumTwo).getDrawNo(drawNumTwo);  
}
function updateDrawNumTwo(drawNumReturnTwo){
   document.getElementById("draw2").value = drawNumReturnTwo;
}

    function getDrawNumThree(){
var drawNumThree = document.getElementById("m_p3").value;
   google.script.run.withSuccessHandler(updateDrawNumThree).getDrawNo(drawNumThree);  
}
function updateDrawNumThree(drawNumReturnThree){
   document.getElementById("draw3").value = drawNumReturnThree;
}

 

Answer 1

描述

回调函数始终传递一个事件对象，而不是进行多个 onChange 回调，尽管大多数示例没有显示它。您可以检查事件对象以查看单击或更改了哪个元素，然后从那里开始。

在本例中，我使用一个 function getDrawNumber(evt){

Script

document.getElementById("btn").addEventListener("click",doStuff);
document.getElementById("m_p1").addEventListener("change",getDrawNumber);
document.getElementById("m_p2").addEventListener("change",getDrawNumber);
document.getElementById("m_p3").addEventListener("change",getDrawNumber);
   
function getDrawNumber(evt){
  // evt is the event that occured
  // evt.target is the element that was changed
  // evt.target.id is one of the element's id
  google.script.run.withSuccessHandler( function(drawNumReturn) {
      var draw = null;
      switch(evt.target.id) {
        case "m_p1":
          draw = 'draw1';
          break;
        case "m_p2":
          draw = 'draw2';
          break;
        case "m_p3":
          draw = 'draw3';
          break;
      }
      if( draw ) document.getElementById(draw).value = drawNumReturn;
    }
  ).getDrawNo(evt.target.value); 
}

References

• https://www.w3schools.com/jsref/event_onchange.asp
• https://www.w3schools.com/jsref/obj_events.asp