使用 AppScript 在 WebApp 中打印输出

Question

function doGet() {
  return HtmlService.createHtmlOutputFromFile("vi");
  // var output = HtmlService.createHtmlOutput('<b>Hello, world!</b>');
  
}
function doPost() {
  return HtmlService.createHtmlOutputFromFile("vi");
  // var output = HtmlService.createHtmlOutput('<b>Hello, world!</b>');
  
}




// function from                      
function luminance(r, g, b) {
  var a = [r, g, b].map(function (v) {
    v /= 255;
    return v <= 0.03928
      ? v / 12.92
    : Math.pow( (v + 0.055) / 1.055, 2.4 );
  });
  return a[0] * 0.2126 + a[1] * 0.7152 + a[2] * 0.0722;
}

function calculateRatio(color1, color2) {

  // read the colors and transform them into rgb format
  // const color1 = document.querySelector("#color-1").value;
  // const color2 = document.querySelector("#color-2").value;
  const color1rgb = hexToRgb(color1);
  const color2rgb = hexToRgb(color2);

  // calculate the relative luminance
  const color1luminance = luminance(color1rgb.r, color1rgb.g, color1rgb.b);
  const color2luminance = luminance(color2rgb.r, color2rgb.g, color2rgb.b);

  // calculate the color contrast ratio
  const ratio = color1luminance > color2luminance 
  ? ((color2luminance + 0.05) / (color1luminance + 0.05))
  : ((color1luminance + 0.05) / (color2luminance + 0.05));
  

  return ratio;
  // Logger.log(ratio);
}
function hexToRgb(hex) {
  
  var shorthandRegex = /^#?([a-f\d])([a-f\d])([a-f\d])$/i;
  hex = hex.replace(shorthandRegex, function(m, r, g, b) {
    return r + r + g + g + b + b;
  });

  var result = /^#?([a-f\d]{2})([a-f\d]{2})([a-f\d]{2})$/i.exec(hex);
  return result ? {
    r: parseInt(result[1], 16),
    g: parseInt(result[2], 16),
    b: parseInt(result[3], 16)
  } : null;
}

// document.querySelector("btn").addEventListener("click", function() {
//   const ratio = calculateRatio();
//   // show results depending on WCAG requirements
//   const result = `
// AA-level large text: ${ratio < 1/3 ? 'PASS' : 'FAIL' }<br>
// AA-level small text: ${ratio < 1/4.5 ? 'PASS' : 'FAIL' }<br>
// AAA-level large text: ${ratio < 1/4.5 ? 'PASS' : 'FAIL' }<br>
// AAA-level small text: ${ratio < 1/7 ? 'PASS' : 'FAIL' }
// `;
//   document.querySelector("#result").innerHTML = result;
// });

<!DOCTYPE html>
<html>
  <head>
    <base target="_top">
  </head>
  <body>
    <label>Foreground Color:</label>  <input type="text" id="color-1"  />
    <label2>BackGround Color:</label2><input type="text" id="color-2"  />

<button id="btn">Calculate Color Contrast</button>

<div id="#result">
  <label>Result : </label>
</div>

<script>

document.getElementById("btn").addEventListener("click",doStuff);
function doStuff(){
  var fcolor = document.getElementById("color-1").value;
  var bgcolor = document.getElementById("color-2").value;

  google.script.run.withSuccessHandler(ratio => {
    const result = `
    AA-level large text: ${ratio < 1/3 ? 'PASS' : 'FAIL' }<br>
    AA-level small text: ${ratio < 1/4.5 ? 'PASS' : 'FAIL' }<br>
    AAA-level large text: ${ratio < 1/4.5 ? 'PASS' : 'FAIL' }<br>
    AAA-level small text: ${ratio < 1/7 ? 'PASS' : 'FAIL' }`;
    document.getElementById("#result").innerHTML = result;
  }).calculateRatio(fcolor, bgcolor);
}



// document.getElementById("btn").addEventListener("click", function() {
//   const ratio = calculateRatio();
//   // show results depending on WCAG requirements
//   const result = `
// AA-level large text: ${ratio < 1/3 ? 'PASS' : 'FAIL' }<br>
// AA-level small text: ${ratio < 1/4.5 ? 'PASS' : 'FAIL' }<br>
// AAA-level large text: ${ratio < 1/4.5 ? 'PASS' : 'FAIL' }<br>
// AAA-level small text: ${ratio < 1/7 ? 'PASS' : 'FAIL' }
// `;
//   document.querySelector("#result").innerHTML = result;
// });
</script> 
  </body>
</html>

我正在尝试制作一个 google 脚本网络应用程序，它从 HTML 表单获取输入并传递来自脚本的输入。现在，该函数失败了，因为结果值没有打印在 html 页面中。我该如何解决这个问题？

但是当我从部署中运行时，我没有得到预期的输出。当我输入值并单击按钮时，没有任何反应。 javascript 也是如此。有人可以帮我在 Google AppScript 中使用这段代码吗？那我如何在 AppScript 的帮助下打印结果输出？

Answer 1

修改点：

如果您想从 HTML 端运行 Google Apps 脚本，请使用 google.script.run。当我看到你的脚本时，似乎 google.script.run 被用作注释行。在这种情况下，为了使用从 Google Apps 脚本返回的值，使用了 withSuccessHandler。

当以上几点反映到你的脚本中，就会变成下面这样。

修改后的脚本：

请修改doStuff()如下。

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

  google.script.run.withSuccessHandler(ratio => {
    const result = `
    AA-level large text: ${ratio < 1/3 ? 'PASS' : 'FAIL' }<br>
    AA-level small text: ${ratio < 1/4.5 ? 'PASS' : 'FAIL' }<br>
    AAA-level large text: ${ratio < 1/4.5 ? 'PASS' : 'FAIL' }<br>
    AAA-level small text: ${ratio < 1/7 ? 'PASS' : 'FAIL' }`;
    document.getElementById("#result").innerHTML = result;
  }).calculateRatio(fcolor, bgcolor);
}

注：

在这种情况下，您的 HTML&Javascript 需要包含在 Google Apps 脚本项目中。请注意这一点。
在此修改中，假设您的 Google Apps 脚本的 calculateRatio 工作正常并且返回了正确的值。

参考：

withSuccessHandler(function)

使用 AppScript 在 WebApp 中打印输出

Print output in WebApp with AppScript

html

javascript

google-apps

google-apps-script

web

修改点：

修改后的脚本：

注：

参考：