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