Google 脚本 Web 应用程序 - 将值发送到 H1 标签而不是输入框

Question

我确信这是一个非常简单的修复，但我不知道如何将从我的 google 工作表“数据库”中提取的值发送到 H1 标签而不是输入框。

我试过以下但有一个输入框并且它工作正常，但是一旦我将它更改为 <p> 或 <h2> 它就不起作用了。以下代码不会触发，因为 Java 脚本的下半部分是 Google 脚本 code.gs 代码。

    document.getElementById("book").addEventListener("click",getData);

    function getData(){

      var grabber = document.getElementById("book").value;
      google.script.run.withSuccessHandler(updateBook).getBook(grabber);

    }

    function updateBook(book){
         document.getElementById("bookn").value = book;
    }

<h1>Select Book</h1><select id="book" class="validate">
<option></option>
<option>Genesis</option>
<option>Exodus</option>
    </select>
  
    <br>
    <br>
<h2 id="bookn">BOOK</h2>
    
   

此代码位于 Google 脚本中 Code.gs

    function doGet(e){

      return HtmlService.createHtmlOutputFromFile("page");

    }


    function getBook(grabber){

      var ss = SpreadsheetApp.openById("1PYuEuroixBQ7UsNry6qKkship_e7Lb3GwH3wuDwgass");
      var ws = ss.getSheetByName("Estimate");
      var data = ws.getRange(1, 1, ws.getLastRow(), 6).getValues();
      
      var bookList = data.map(function(r){return r[0];});
      var refList = data.map(function(r){return r[0];});
      var position =  bookList.indexOf(grabber)
      
      if(position > -1){
      return refList[position];
      } else {
        return 'Unavailable';
      }
    }

所以只是想知道我如何让它与文本而不是输入框一起工作。如果我使用

<input disabled type="text" id="bookn">

效果很好

Answer 1

value 属性不是您网页中显示值所必需的

对于像 H1 这样的标签，您需要更改 innerHTML instead of the value。

样本：

document.getElementById("bookn").innerHTML = book;

还有：

改变可能有意义

document.getElementById("book").addEventListener("clicke",getData);

到

document.getElementById("book").addEventListener("change",getData);