My javascript code logically makes sense but doesn't work

Currently I am working on a drawing software and I wanted to make a settings menu. I currently have a div with some styling and some sub dives under that. It’s not very important.

I am trying to hide all settings content divs and then show the correct one from parameter.

Here is my code:

function switchToSettingTab(tabName) {
  const tabcontent = document.getElementsByClassName("settingsContent");
  for (var i = 0; i < tabcontent.length; i++) {
    tabcontent[i].style.display = "none";
  document.getElementById(tabName).style.display = "block";

document.getElementById("settings-main-span").addEventListener("click", switchToSettingTab("settings-menu-main"));
document.getElementById("settings-personalization-span").addEventListener("click", switchToSettingTab("settings-menu-personalization"));

Thank You!

Could you share the rest of the code? Is it in a Repl?

Yes it is, here is the link: