Quiero llamar a otra función en una función que devuelve un valor como se muestra a continuación. Por favor, avíseme si mi método es correcto:


function runnCode(){
      var fcolor = document.getElementById("color-1-hex").value;
      var bgcolor = document.getElementById("color-2-hex").value;
    

      google.script.run.withSuccessHandler(ratio => {
        
        //document.getElementById("#result").innerHTML = result;
        var n = 1/ratio;
        var actualRatio = n.toFixed(2);
        document.getElementById("ratio").innerHTML = actualRatio + ":1";
        document.getElementById("aa-normal").className  = ratio < 0.22222 ? "" : "fail";
        document.getElementById("aa-large").className   = ratio < 0.33333 ? "" : "fail";
        document.getElementById("aaa-normal").className = ratio < 0.14285 ? "" : "fail";
        document.getElementById("aaa-large").className  = ratio < 0.22222 ? "" : "fail";
        document.getElementById("ratioContainer").className   = ratio > 0.22222 ? "" : "pass";

        // document.getElementById("aa-normal"). = ratio < 0.22222 ? "" : "fail";
         const demo = document.getElementById("sample-text");
          demo.style.color = fcolor;
          demo.style.backgroundColor = bgcolor;

        const totalWrong = document.querySelectorAll(".fail").length;
        let mouth = document.getElementById("mouth");
        let smile = document.getElementById("smile");
        switch(totalWrong) {
      case 0:
        mouth = mouth.setAttribute("d", "M 106,132 C 113,127 125,128 125,132 125,128 137,127 144,132 141,142  134,149  125,149  116,149 109,142 106,132 Z") ;
        smile = smile.setAttribute("d", "M125,144 C 140,144 143,132 143,132 143,132 125,133 125,133 125,133 106.5,132 106.5,132 106.5,132 110,144 125,144 Z");
        
        break;
      case 1:
      case 2:
        mouth.setAttribute("d", "M 106,132 C 113,127 125,128 125,132 125,128 137,127 144,132 141,142  134,146  125,146  116,146 109,142 106,132 Z");
        smile.setAttribute("d", "M125,141 C 140,141 143,132 143,132 143,132 125,133 125,133 125,133 106.5,132 106.5,132 106.5,132 110,141 125,141 Z");
        
        break;
      case 3: 
        mouth.setAttribute("d", "M 106,132 C 113,127 125,128 125,132 125,128 137,127 144,132 141,138  140,143  125,143  110,143 109,138 106,132 Z");
        smile.setAttribute("d", "M125,138 C 140,138 143.5,132 143.5,132 143.5,132 125,133 125,133 125,133 106.5,132 106.5,132 106.5,132 110,138 125,138 Z");
        break;
      case 4: 
        mouth.setAttribute("d", "M 106,132 C 113,127 125,128 125,132 125,128 137,127 144,132 141,138  134,142  125,142  116,142 109,138 106,132 Z");
        smile.setAttribute("d", "M125,135 C 140,135 143,132 143,132 143,135 125,136 125,136 125,136 106.5,135 106.5,132 106.5,132 110,135 125,135 Z");
        
       break;
    }
     google.script.run.withSuccessHandler( suggestedColor {
             document.getElementById("aa-normal").innerHTML  = ratio < 0.22222 ? "" : suggestedColor;
             document.getElementById("aa-large").innerHTML   = ratio < 0.33333 ? "" : suggestedColor;
             document.getElementById("aaa-normal").innerHTML = ratio < 0.14285 ? "" : suggestedColor;
             document.getElementById("aaa-large").innerHTML  = ratio < 0.22222 ? "" : suggestedColor;
       }).hexx(fcolor, bgcolor);
         

      document.getElementById("aa-normal").className  = "fail";
         console.log(document.querySelectorAll("#aa-normal").className.=);
      }).calculateRatio(fcolor,bgcolor);
    
      
}

Quiere llamar a dos funciones, ambas devuelven algún valor. Por favor, avíseme la forma correcta de llamar a dos funciones en el script de la aplicación de Google

1
kanu priya 21 ene. 2021 a las 20:43

1 respuesta

La mejor respuesta

Puntos de modificación:

  • En su secuencia de comandos, google.script.run.withSuccessHandler( suggestedColor { debe modificarse como google.script.run.withSuccessHandler(suggestedColor => {.
  • En este caso, creo que hay 2 direcciones para lograr su objetivo.
    1. En el lado de Google Apps Script, las funciones de calculateRatio y hexx se combinan y se devuelven los valores de ratio y suggestedColor. En este caso, google.script.run se usa una vez.
    2. En el lado de Javascript, los valores de ratio y suggestedColor se recuperan usando 2 google.script.run por medio de Promise devuelto. Por esto, la legibilidad del script puede ser un poco alta.

Desafortunadamente, en su pregunta, no puedo comprender las funciones de calculateRatio y hexx de su secuencia de comandos de Google Apps. Entonces, en esta respuesta, me gustaría proponer la segunda dirección anterior.

Cuando se modifica su secuencia de comandos, se convierte en lo siguiente.

Script modificado 1:

const calculateRatio = (fcolor, bgcolor) => new Promise((resolve, reject) => google.script.run.withSuccessHandler(resolve).withFailureHandler(reject).calculateRatio(fcolor, bgcolor));
const hexx = (fcolor, bgcolor) => new Promise((resolve, reject) => google.script.run.withSuccessHandler(resolve).withFailureHandler(reject).hexx(fcolor, bgcolor));

async function runnCode() {
  const fcolor = document.getElementById("color-1-hex").value;
  const bgcolor = document.getElementById("color-2-hex").value;
  const ratio = await calculateRatio(fcolor, bgcolor).catch(err => console.log(err));
  const suggestedColor = await hexx(fcolor, bgcolor).catch(err => console.log(err));

  var n = 1/ratio;
  var actualRatio = n.toFixed(2);
  document.getElementById("ratio").innerHTML = actualRatio + ":1";
  document.getElementById("aa-normal").className  = ratio < 0.22222 ? "" : "fail";
  document.getElementById("aa-large").className   = ratio < 0.33333 ? "" : "fail";
  document.getElementById("aaa-normal").className = ratio < 0.14285 ? "" : "fail";
  document.getElementById("aaa-large").className  = ratio < 0.22222 ? "" : "fail";
  document.getElementById("ratioContainer").className   = ratio > 0.22222 ? "" : "pass";
  const demo = document.getElementById("sample-text");
  demo.style.color = fcolor;
  demo.style.backgroundColor = bgcolor;
  const totalWrong = document.querySelectorAll(".fail").length;
  let mouth = document.getElementById("mouth");
  let smile = document.getElementById("smile");
  switch(totalWrong) {
    case 0:
      mouth = mouth.setAttribute("d", "M 106,132 C 113,127 125,128 125,132 125,128 137,127 144,132 141,142  134,149  125,149  116,149 109,142 106,132 Z") ;
      smile = smile.setAttribute("d", "M125,144 C 140,144 143,132 143,132 143,132 125,133 125,133 125,133 106.5,132 106.5,132 106.5,132 110,144 125,144 Z");
      break;
    case 1:
    case 2:
      mouth.setAttribute("d", "M 106,132 C 113,127 125,128 125,132 125,128 137,127 144,132 141,142  134,146  125,146  116,146 109,142 106,132 Z");
      smile.setAttribute("d", "M125,141 C 140,141 143,132 143,132 143,132 125,133 125,133 125,133 106.5,132 106.5,132 106.5,132 110,141 125,141 Z");
      break;
    case 3: 
      mouth.setAttribute("d", "M 106,132 C 113,127 125,128 125,132 125,128 137,127 144,132 141,138  140,143  125,143  110,143 109,138 106,132 Z");
      smile.setAttribute("d", "M125,138 C 140,138 143.5,132 143.5,132 143.5,132 125,133 125,133 125,133 106.5,132 106.5,132 106.5,132 110,138 125,138 Z");
      break;
    case 4: 
      mouth.setAttribute("d", "M 106,132 C 113,127 125,128 125,132 125,128 137,127 144,132 141,138  134,142  125,142  116,142 109,138 106,132 Z");
      smile.setAttribute("d", "M125,135 C 140,135 143,132 143,132 143,135 125,136 125,136 125,136 106.5,135 106.5,132 106.5,132 110,135 125,135 Z");
      break;
  }

  document.getElementById("aa-normal").innerHTML  = ratio < 0.22222 ? "" : suggestedColor;
  document.getElementById("aa-large").innerHTML   = ratio < 0.33333 ? "" : suggestedColor;
  document.getElementById("aaa-normal").innerHTML = ratio < 0.14285 ? "" : suggestedColor;
  document.getElementById("aaa-large").innerHTML  = ratio < 0.22222 ? "" : suggestedColor;

  document.getElementById("aa-normal").className  = "fail";
  console.log(document.querySelectorAll("#aa-normal").className.=);
}

Guión modificado 2:

En esta modificación, se modifica su secuencia de comandos de Google Apps.

Agregue la siguiente secuencia de comandos a Google Apps Script. Con esto, los valores de ratio y suggestedColor se recuperan mediante una llamada.

const sample = (fcolor, bgcolor) => [calculateRatio(fcolor, bgcolor), hexx(fcolor, bgcolor)];

Y modifique su Javascript de la siguiente manera.

function runnCode(){
  var fcolor = document.getElementById("color-1-hex").value;
  var bgcolor = document.getElementById("color-2-hex").value;

  google.script.run.withSuccessHandler(([ratio, suggestedColor]) => {
    var n = 1/ratio;
    var actualRatio = n.toFixed(2);
    document.getElementById("ratio").innerHTML = actualRatio + ":1";
    document.getElementById("aa-normal").className  = ratio < 0.22222 ? "" : "fail";
    document.getElementById("aa-large").className   = ratio < 0.33333 ? "" : "fail";
    document.getElementById("aaa-normal").className = ratio < 0.14285 ? "" : "fail";
    document.getElementById("aaa-large").className  = ratio < 0.22222 ? "" : "fail";
    document.getElementById("ratioContainer").className   = ratio > 0.22222 ? "" : "pass";
    const demo = document.getElementById("sample-text");
    demo.style.color = fcolor;
    demo.style.backgroundColor = bgcolor;
    const totalWrong = document.querySelectorAll(".fail").length;
    let mouth = document.getElementById("mouth");
    let smile = document.getElementById("smile");
    switch(totalWrong) {
      case 0:
        mouth = mouth.setAttribute("d", "M 106,132 C 113,127 125,128 125,132 125,128 137,127 144,132 141,142  134,149  125,149  116,149 109,142 106,132 Z") ;
        smile = smile.setAttribute("d", "M125,144 C 140,144 143,132 143,132 143,132 125,133 125,133 125,133 106.5,132 106.5,132 106.5,132 110,144 125,144 Z");
        break;
      case 1:
      case 2:
        mouth.setAttribute("d", "M 106,132 C 113,127 125,128 125,132 125,128 137,127 144,132 141,142  134,146  125,146  116,146 109,142 106,132 Z");
        smile.setAttribute("d", "M125,141 C 140,141 143,132 143,132 143,132 125,133 125,133 125,133 106.5,132 106.5,132 106.5,132 110,141 125,141 Z");
        break;
      case 3: 
        mouth.setAttribute("d", "M 106,132 C 113,127 125,128 125,132 125,128 137,127 144,132 141,138  140,143  125,143  110,143 109,138 106,132 Z");
        smile.setAttribute("d", "M125,138 C 140,138 143.5,132 143.5,132 143.5,132 125,133 125,133 125,133 106.5,132 106.5,132 106.5,132 110,138 125,138 Z");
        break;
      case 4: 
        mouth.setAttribute("d", "M 106,132 C 113,127 125,128 125,132 125,128 137,127 144,132 141,138  134,142  125,142  116,142 109,138 106,132 Z");
        smile.setAttribute("d", "M125,135 C 140,135 143,132 143,132 143,135 125,136 125,136 125,136 106.5,135 106.5,132 106.5,132 110,135 125,135 Z");
        break;
    }
    document.getElementById("aa-normal").innerHTML  = ratio < 0.22222 ? "" : suggestedColor;
    document.getElementById("aa-large").innerHTML   = ratio < 0.33333 ? "" : suggestedColor;
    document.getElementById("aaa-normal").innerHTML = ratio < 0.14285 ? "" : suggestedColor;
    document.getElementById("aaa-large").innerHTML  = ratio < 0.22222 ? "" : suggestedColor;

    document.getElementById("aa-normal").className  = "fail";
    console.log(document.querySelectorAll("#aa-normal").className.=);
  }).sample(fcolor,bgcolor);
}

Referencias:

2
Tanaike 22 ene. 2021 a las 06:01