'Better way to run a similar function with different inputs than just coding slightly different versions of the same function?

Just trying to improve my coding quality...have probably brute forced this - wondering if there is a more efficient way to code it? The task: Am getting inputs from 3 HTML dropdowns, and then passing a user input (m_px) to get a return from a googlesheet (drawx) and then writing that back to the web page. The below works fine...just seems like a lot of code/vars for a simple task...how could I code it better? For example - how can I replace getDrawNumOne thru Three with a single function? One extra note: in the actual script these functions go up to getDrawNumEight(!). Thanks for advice/input.

   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;
}
javascripthtmlgoogle-apps-scriptcoding-efficiency


Solution 1:[1]

Description

Rather than make multiple onChange callbacks, the callback function always has an event object passed to it, although most examples don't show it. You can examine the event object to see which element was clicked or changed and go from there.

In this case I use one 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

Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution Source
Solution 1 TheWizEd

Related Questions