Google Script Web App - Send Value to H1 Tag instead of Input box

I'm sure it's a very simple fix but I can't figure out how to send a value pulled from my google sheets "database" into a H1 tag instead of into an Input box.

I've tried the following but with an input box and it works fine, but as soon as i change it to <p> or <h2> it doesn't work. The following code won't fire as the bottom half of the Java script is the Google Scripts code.gs code.

    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>
    
   

This Code Sits inside Google Script 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';
      }
    }

So just wondering how I get it to work with text rather than an input box. If i use

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

It works just fine