如何在 html <p> 中显示来自 google 脚本对象的值？

Question

HTML代码

我想在

<div class="control-form-id">
  <label for="id">Id:</label>
  <input type="text" name="id" id="id" required>
  <button type="button" onclick="JSinHTML();" id="search" >Search</button>
</div>

<div class="serial">
  <label for="serial">Serial number:</label>
  <p id="serial">result</p>
</div>

<script>
  function JSinHTML(){
     let id_form ={}
  id_form.input = document.getElementById("id").value
  alert(id_form.input);
  google.script.run.main(id_form);
  document.getElementById("id").value = "";
} 
               
                  
</script>

GOOGLE脚本代码

function findId returns 行号按类型 id

function main(JSinHtml){
    let numberRow = findId(JSinHtml.input); 
    Logger.log("input in main " + JSinHtml.input);
    let toHtml = {};
    toHtml.id = sheet_spis.getRange(numberRow, column_id).getValue();
    toHtml.serial_number = sheet_spis.getRange(numberRow, column_serialnr).getValue();
    toHtml.size = sheet_spis.getRange(numberRow, column_size).getValue();
    toHtml.type = sheet_spis.getRange(numberRow, column_type).getValue();
    Logger.log(toHtml); //I want to display separately this values in few <p>
}

Answer 1

你的情况，下面的修改怎么样？

HTML & Javascript 边:

来自

google.script.run.main(id_form);

收件人：

google.script.run.withSuccessHandler(e => {
  document.getElementById("serial").innerHTML = e.serial_number;
}).main(id_form);

Google Apps 脚本端：

来自

Logger.log(toHtml); //I want to display separately this values in few <p>

收件人：

Logger.log(toHtml);
return toHtml;

注：

• 从<p id="serial">result</p>，我猜你可能想把serial_number的值放上去。所以，我提出来了。如果要显示toHtml的整个对象，请将document.getElementById("serial").innerHTML = e.serial_number;修改为document.getElementById("serial").innerHTML = JSON.stringify(e);。

参考：

• withSuccessHandler(function)