my document inquiry runs properly if I run it on page load, but not through a button click, the code is the same and the variables are passed right

Question

I am making a chrome extension that will fill a text field of a website if conditions are met. The document query succeeds if I set the code to run on message receipt (which happens on page load) but if I use the exact same code inside of a button click listener where I want it, the query returns null instead of the appropriate field. I cant see what the issue is.

EDIT: the issue is the document.querySelector action. If it runs as part of the onMessage line of functions it finds the field fine. If I move it into the click listener, it fails every time. I even tried moving the query directly into the fillField function. If I call it on page load, it works. If I call it on button click, fails.

var url = "it didnt work.";
var discount = "What are you doing";
var penguin;
var duck;

// this listens for a message to be sent from the background script containing the cookie variables,
// which happens on page load.
chrome.runtime.onMessage.addListener(function (request, sender, sendResponse) {
  // this sets the variables from the message to easily accessible ones
  url = request.url;
  discount = request.discount;
  // this saves the variables to local storage so they can be retrieved outside of this function
  chrome.storage.local.set({ site: url, code: discount });

  if (discount == undefined) {
    // error alert if the variables didnt pass successfully
    alert("shit be fucky, reload");
  } else {
    // alert that everything was successfull - currently off because it got annoying
    //       alert(url + " " + discount)
    // fill field running on page load instead of on button click
    var discountInput = document.querySelector(
      'input[name="checkout[discount][code]"]'
    );
    fillField(discountInput, discount);
  }
});
// this listens for button click from popup file
document.addEventListener("DOMContentLoaded", function () {
  var contents = document.getElementById("content");
  contents.addEventListener("click", onClick);
});
// this runs when the button is clicked
function onClick() {
  // retreives the stored variables
  chrome.storage.local.get(["site", "code"], function (result) {
    //changes the variable names so they dont get confused with the global ones if they dont pass properly
    penguin = result.site;
    duck = result.code;
  });
  // alert to show what the variables are - currently off
  // alert(penguin + " " + duck)
  //passes variables into next function
  check_cookie_name(penguin, duck);
}

function check_cookie_name(penguin, duck) {
  // gets the info from current browser tab and sets the url as a variable
  chrome.tabs.query({ active: true, currentWindow: true }, function (tabs) {
    var activeTab = tabs[0];
    var activeTabURL = activeTab.url;
    // alert to verify variables
    alert(
      "the current URL is " +
        activeTabURL +
        "\r\n" +
        "\r\n" +
        "the partner website is " +
        penguin +
        "\r\n" +
        "\r\n" +
        "the discount code is " +
        duck
    );

    // if the current website matches the url saved with the discount code
    if (activeTabURL.includes(penguin)) {
      // gets the discount code input field from the current tab and runs the fill function
      var discountInput = document.querySelector(
        'input[name="checkout[discount][code]"]'
      );

      fillField(discountInput, duck);
      // alert that everything has passed down and fill function should run
      alert(
        "the fill function was triggered with values " +
          discountInput +
          " and " +
          duck
      );
    }
    // alert that something has gone wrong.
    else {
      alert("failure");
    }
  });
}

function fillField(field, value) {
  // if the input area name is found on the page, it fills it with the value passed in.
  if (field) {
    field.value = value;
    // alert that the function has run
    alert("fill ran on input field " + field + " with value of " + value);
  }
}