Установка переменных css с помощью vanilla JS при нажатии и при загрузке (используя localStorage)

Question

Я пытаюсь настроить несколько простых тем с помощью JS, изменив несколько переменных css на: root нажатием одной кнопки (тема должна измениться сразу после нажатия кнопки) и при загрузке страницы (тема должна быть установлена ​​на основе элемента localStorage значение).

Вот, я думаю, мой «черновой» javascript, который, кажется, работает по большей части, , за исключением , как ни странно, нажатия кнопок ничего не делают, но при загрузке страницы запускаются события нажатия (каждое в последовательности! ). Я чувствую, что я рядом, но я явно делаю что-то не так.

const root = document.documentElement.style,
      button1 = document.getElementById("defaultBtn"),
      button2 = document.getElementById("darkBtn"),
      button3 = document.getElementById("lightBtn");
function setProperties(bg_color,fg_color,link_color,name) {
  root.setProperty("--bg",bg_color);
  root.setProperty("--fg",fg_color);
  root.setProperty("--link-color",link_color);
  console.log("Theme set to " + name);
}
function loadTheme() {
  let theme = localStorage.getItem("theme");
  switch (theme) {
    case "dark":
      setProperties("0%","59%","80%","dark");
      break;
    case "light":
      setProperties("100%","0%","100%","light");
      break;
    case "default":
      setProperties("90%","29%","90%","default");
      break;
    default:
      console.log("Theme has not been set.");
  }
}
function setTheme(name) {
  localStorage.setItem("theme", name);
  loadTheme();
}
window.addEventListener("DOMContentLoaded",loadTheme);
button1.addEventListener("click", setTheme("default"));
button2.addEventListener("click", setTheme("dark"));
button3.addEventListener("click", setTheme("light"));

Answer 1

Вот ваша проблема. Вы вызываете функцию вместо того, чтобы передавать ее слушателю событий, что означает, что функция запускается мгновенно, а не при нажатии кнопки.

button1.addEventListener("click", setTheme("default"));

Решение состоит в том, чтобы обернуть код в нечто, называемое Closure . Попробуйте это:

function setTheme(name) {
  return function() {
      localStorage.setItem("theme", name);
      loadTheme(name);
  }
}

Вот пример:

function onClick(msg) {
	return function() {
  	console.log(msg)
  }
}

const button = document.getElementById('btn')
button.addEventListener('click', onClick('Hello'))

<button id="btn">Press Me</button>