What am I missing in my addEventListener

[kernix]

I’m getting an error in the console of “Uncaught TypeError: Cannot read properties of null (reading ‘addEventListener’)”

I built a web-based keyboard and I need to add functionality for the non-printing keys like Enter, Delete, Caps, etc. I first want to add a class of “caps-on” when the user clicks the CAPS key so that the button remains highlighted -so they know CAPS is still on. Seems simple enough but I’m missing something. Here is the HTML for the CAPS button:

<button id="caps" class="nonprint caps" value="caps">Caps</button>

Here is my JS:

const capsKey = document.getElementById(caps);
function capitalize() {
  if (capsKey.classList.contains('caps-on')) {
    capsKey.classList.remove("caps-on");
  } else {
    capsKey.classList.add("caps-on");
  }
}

capsKey.addEventListener("click", capitalize);

What am I doing wrong? What is “null” in the addEventListener line?

[bbsmooth]

@kernix

const capsKey = document.getElementById(caps);

caps should probably be a string.

[kernix]

Duh! How could I miss that - I knew it was something simple. I’m tired and feeling run down - thanks!

[bbsmooth]

Happens to the best of us every once in a while.