Why is a button firing the event of a previous element/tag?-CodePudding

I'm not sure what's causing the form button to fire the event of turning the page theme back to white after the dark mode has been clicked and enabled. Not sure if that may be confusing, but for example if you open the page it's automatically on the light mode theme, when you click "dark" to switch the theme to dark and then click the button "search" while the theme is in "dark", the page will switch back to "light". What am I doing wrong or missing out? Please advise. Also, how could I refractor this JS better and simpler?

Thanks!

HTML - left out the head part intentionally

<html lang="en" color-mode="light">

  <body>
    <header >
      <h1 >devfinder</h1>
      <div >
        <span
          
          aria-label="light theme toggle button">
          LIGHT
          <img  src="assets/icon-sun.svg" alt="" />
        </span>

        <span
          
          aria-label="dark theme toggle button">
          DARK
          <img src="assets/icon-moon.svg" alt="" />
        </span>
      </div>
    </header>

    <main >
      <section>
        <form autocomplete="off"  id="search">
          <input
            type="text"
            id="search"
            placeholder="Search GitHub username…" />
          <button >Search</button>
        </form>

const themeBtn = document.querySelectorAll(".theme-toggle-btn");

const toggle = function (e) {
  if (e.currentTarget.classList.contains("light-hidden")) {
    document.documentElement.setAttribute("color-mode", "light");
    localStorage.setItem("color-mode", "light");
    return;
  }
  document.documentElement.setAttribute("color-mode", "dark");
  localStorage.setItem("color-mode", "dark");
};

themeBtn.forEach((btn) => {
  btn.addEventListener("click", toggle);
});

CSS

:root {
  --monoFont: 'Space Mono', monospace;
  --accent-blue: #0079FF;
  --error-red: #F74646;
  --light-hover: #60ABFF;
}

:root[color-mode="light"] {
  --primary-text-color:#697C9A;
  --secondary-text-color: #4B6A9B;
  --accent-color: #2B3442;
  --background-color: #F6F8FF;
  --container-background: #FEFEFE;
  --font-color: #222731;
}

:root[color-mode="dark"] {
  --primary-text-color: #FFFFFF;
  --background-color: #141D2F;
  --container-background: #1E2A47; 
}

*,
*::before,
*::after {
  box-sizing: border-box;
}

:root[color-mode="light"] .light-hidden,
:root[color-mode="dark"] .dark-hidden {
  display: none;
}

body {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;

  background-color: var(--background-color);
  height: 100vh;
  margin: 0;

  color: var(--primary-text-color);
  font-family: var(--monoFont);
}

.header-container {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 2em;
}

.header-container, .content-container {
  width: 100%;
  max-width: 730px;
}

/* header title */
.title {
  color: var(--font-color);
  font-size: 1.63rem;
}

/* theme toggle btn */
.theme-toggle-btn {
  background-color: var(--background-color);
  border: none;
  
  color: var(--primary-text-color);
  font-size: .7rem;
  font-weight: 700;
  letter-spacing: 1.5px;

  cursor: pointer;
}

.theme-toggle-btn img {
  margin: 0 0 -0.45em 0.75em;
  width: 20px;
  height: 20px;
}

/* search form */
.form {
  position: relative;
  display: flex;
  align-items: center;
  height: 69px;
}

.form input {
  background-color: var(--container-background);
  border: none;
  width: 100%;
  padding-left: 1.5em;
  margin-bottom: 2em;

  color: var(--font-color);
  font-size: 1.05rem;
  font-family: inherit;
  font-weight: 400;

  border-radius: 10px;
  box-shadow: rgba(0, 0, 0, 0.1) 0px 4px 12px;;

}

.form input::placeholder {
  color: var(--secondary-text-color);
}

.btn {
  position: absolute;
  top: 50%;
  right: 10px;
  transform: translateY(-80%);

  width: 100%;
  max-width: 106px;
  height: 50px;
  background-color: var(--accent-blue);
  border: none;

  color: #FFFFFF;
  font-size: 1rem;

  border-radius: 10px;
  cursor: pointer;
}

.btn:hover {
  background-color: var(--light-hover);
}

CodePudding user response：

I think when you're clicking the "Search" button, it's refreshing the page and reloads the html template. Because you have "color-mode="light" within the html element, it will then load the page in light mode rather than dark mode.

CodePudding user response：

I think the problem is: your not consuming the selection from localStorage. To persist the user selection, you should check the preference in localStorage when the page loads.