Custom event handler for "onclick" is not firing

Hi Everyone,

I'm adding a custom interaction to one of my pages. I want to attach a custom event handler for the "onclick" event to checkbox inputs in the form on the page. I am adding this customisation through a Code block on the page (see code at the bottom).

The page loads without any errors and I can see my logging messages in the browser's console. However, my custom event handler (BDchangeImage) never fires.

I am really stuck. I'd really appreciate some insight into this problem.

cheers,
-tomek

System info: whatsmybrowser.org/b/U8PE4

Page: https://point-lanternfish-gcd5.squarespace.com/customise-your-bento

Code Block:

<style>
  .form-button-wrapper {
    display: none;
  }
</style>

<script>
  function BDgetImageURL(elem) {
    const IMAGE_URL_MAP = {
      0b000: "https://images.squarespace-cdn.com/content/65375ae7a68ab831b9791ad6/c814ed7d-2c25-4124-906f-b6fa85b66745/000.png",
      0b001: "https://images.squarespace-cdn.com/content/65375ae7a68ab831b9791ad6/84454544-15ef-4b8e-99a6-8445ed7710dc/001.png",
      0b010: "https://images.squarespace-cdn.com/content/65375ae7a68ab831b9791ad6/6938758b-14f5-4b38-a56e-bef3a59dd9f8/010.png",
      0b011: "https://images.squarespace-cdn.com/content/65375ae7a68ab831b9791ad6/f1474329-f993-4870-b865-e24d1fddcb38/011.png",
      0b100: "https://images.squarespace-cdn.com/content/65375ae7a68ab831b9791ad6/6dadb819-7c00-4654-b773-7a05309fc7f9/100.png",
      0b101: "https://images.squarespace-cdn.com/content/65375ae7a68ab831b9791ad6/5991e22e-156f-4bd6-b5f0-ca53d605e149/101.png",
      0b110: "https://images.squarespace-cdn.com/content/65375ae7a68ab831b9791ad6/e1dc6e0b-e632-488a-9a52-46db3c6c17c2/110.png",
      0b111: "https://images.squarespace-cdn.com/content/65375ae7a68ab831b9791ad6/feb09cb2-4008-4589-9ac8-cbf7f8619de7/111.png"
    }
    const bathroom = document.querySelector('input[value="Bathroom"]').checked ? 0b100 : 0b000;
    const grid = document.querySelector('input[value="Studio Grid"]').checked ? 0b010 : 0b000;
    const kitchen = document.querySelector('input[value="Kitchen"]').checked ? 0b001 : 0b000;
    let imageIndex = bathroom | grid | kitchen;
    return IMAGE_URL_MAP[imageIndex];
  }

  function BDchangeImage(elem) {
    console.log("🪵 BDchangeImage");
    let imageUrl = BDgetImageURL(elem);
    document.querySelector('img[alt="bd-module-diagram"]').setAttribute('srcset', imageUrl);
  }

  document.addEventListener("DOMContentLoaded", function() {

    console.log("🪵 DOMContentLoaded");

    const bathroom = document.querySelector('input[value="Bathroom"]');
    bathroom.onclick = BDchangeImage;
    console.log("🪵 bathroom.onclick = " + bathroom.onclick);

    const grid = document.querySelector('input[value="Studio Grid"]');
    grid.onclick = BDchangeImage;
    console.log("🪵 grid.onclick = " + grid.onclick);

    const kitchen = document.querySelector('input[value="Kitchen"]');
    kitchen.onclick = BDchangeImage;
    console.log("🪵 kitchen.onclick = " + kitchen.onclick);
  });
</script>

Please see the following. It is not a solution but a possible explanation why things are not working the way you think they should.

So further to this, I've noticed that even though the even handler is assigned when the code block is evaluated the handler is null after the page has loaded. What gives? Does SS disable custom events at some stage?

cheers,
-tomek

I should also add that I don't want to submit the form. I am simply using the form block as means of displaying checkboxes that automatically follow the look of the site. All of this is on a new site implemented in 7.1