My javascript code logically makes sense but doesn't work

Code Help HTML/CSS/JS
1

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!

2

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

3

Yes it is, here is the link:
https://pixkit.m1dnightdev.repl.co/