I'm 99% through done writing this code but I'm stuck on the last hurdle.

The main issue here is: I have 2 HTML buttons which aim to change text based on the function output, successful or not. Currently, the logic for the functions is working - ie the expected returned values are as expected. However, when I try to move these functions into my HTML file, they automatically run, which is overwriting the default value and defeating the point of having the button.

Button:

<button id="goldButton" onclick = "${calcGoldTierStatus(exampleCustomer)}">Click me!</button> 
    <h2 id="goldResult">Gold tier eligibility:${goldTierEligible}</h2>

Function earlier in same script.js:

function calcSilverTierStatus() {
  if (
    exampleCustomer.previousStays >= silverTier.previousStays &&
    exampleCustomer.bookingAgencyId === null || String || Number &&
    (exampleCustomer.roomSpend / (exampleCustomer.roomSpend.length+=1)) >= 100 &&
    exampleCustomer.reservationNights >= silverTier.previousStays
  ) {
    silverTierEligible = ("Silver Eligibility:Eligible for Silver tier!")
  } else {
    silverTierEligible= ("Silver Eligibility:Not eligible for Silver Tier")
  }
}

What may be noteworthy is that I am passing the values into HTML via declaring a const 'content', then using:

document.body.innerHTML = content;

to write the HTML body. It seems to be the $(calcGoldTierStatus(exampleCustomer)} that is causing the autorun, but I had no idea how to otherwise move the function into HTML from JS.