javascript - 由于引用错误，csv似乎没有出现

我对此很陌生，因此我很确定这只是我的简单疏忽，但我无法运行它。

当我部署下面的代码并单击按钮时，它不会执行任何操作。当我在浏览器中检查html时，它说“ userCodeAppPanel：1未捕获的ReferenceError：csvHTML未定义
在HTMLInputElement.onclick”

当我从Code.gs运行功能csvHTML时，我可以在Logger.log中看到预期的结果，因此问题似乎不在于我的code.gs

我想要实现的是在html中显示csv结果。如果一切正常，我将希望以其他方式处理数据。

下面附上我的代码。

Index.html：

<!DOCTYPE html>
<!-- styles -->
<?!= HtmlService.createHtmlOutputFromFile("styles.css").getContent(); ?>

<div class="content">

  <h1>csv representation</h1>

  <input class="button" type="submit" onclick="html();" value="Refresh" id="refresh"><br>
  <div id="tabel"></div>
  <svg class="chart"></svg>

</div>

<!-- javascript -->
<script src="//d3js.org/d3.v3.min.js"></script>
<?!= HtmlService.createHtmlOutputFromFile("chart.js").getContent() ?>
<?!= HtmlService.createHtmlOutputFromFile("main.js").getContent() ?>

<script>

function html()
{
var aContainer = document.createElement('div');
    aContainer.classList.add('loader_div');
    aContainer.setAttribute('id', 'second');
    aContainer.innerHTML = "<div class='loader_mesage'><center>Fetching csv list. Please be patient!<br /> <br /><img src='https://i.ibb.co/yy23DT3/Dual-Ring-1s-200px.gif' height='50px' align='center'></img></center></div>";
    document.body.appendChild(aContainer);

google.script.run
           .withSuccessHandler(showTable)
           .csvHTML();
}

function showTable(tabel)
{
document.getElementById("tabel").innerHTML = tabel;
var element = document.getElementById("second");
element.parentNode.removeChild(element);
}
</script>

和Code.gs：

function doGet(e) {
  return HtmlService.createTemplateFromFile("index.html")
    .evaluate()
    .setSandboxMode(HtmlService.SandboxMode.IFRAME);
}


// Fecth Data and make a csv output.

function csvHTML()
{
var query = "{ 'query': 'SELECT * FROM `<some table>` limit 1000;', 'useLegacySql': false }";
var job = BigQuery.Jobs.query(query, <projectName>);
var json = JSON.parse(job);
var tabel = json2csv(json);
Logger.log(tabel)
return tabel;
}

function json2csv(json, classes) {
  var headerRow = '';
  var bodyRows = '';
  classes = classes || '';

  json.schema.fields.forEach(function(col){
    headerRow +=col.name+",";
  })

  json.rows.forEach(function(row){
   row.f.forEach(function(cell){
      bodyRows +=cell.v+",";
    })

                  })
     return headerRow + bodyRows }

最佳答案

因此，感谢TheMaster的建议，我将其重写为以下内容：

index.html：

<!-- javascript -->
<script src="//d3js.org/d3.v3.min.js"></script>

<script>

function html()
{
var aContainer = document.createElement('div');
    aContainer.classList.add('loader_div');
    aContainer.setAttribute('id', 'second');
    aContainer.innerHTML = "<div class='loader_mesage'><center>Fetching csv list. Please be patient!<br /> <br /><img src='https://i.ibb.co/yy23DT3/Dual-Ring-1s-200px.gif' height='50px' align='center'></img></center></div>";
    document.body.appendChild(aContainer);


google.script.run
           .withSuccessHandler(showTable)
           .csvHTML();
}

function showTable(tabel)
{
document.getElementById("tabel").innerHTML = tabel;
var element = document.getElementById("second");
element.parentNode.removeChild(element);
}
</script>

<!DOCTYPE html>


<div class="content">

  <h1>csv representation</h1>

  <input class="button" type="submit" onclick="html();" value="Refresh" id="refresh"><br>
  <div id="tabel"></div>
  <svg class="chart"></svg>

</div>

Code.gs尚未修改。

看来<?!= htmlService.createHtmlOutputFromFile("styles.css").getContent(); ?>和其他createHtmlOutputFromFile妨碍了。最终我需要这些，但是我将在以后的阶段弄清楚如何将其合并。

感谢您的所有建议和帮助！