Set an attribute without replacing any existing class attributes

Question

Set an attribute without replacing any existing class attributes

I have developed a script that updates the class attribute of the body element on my website when an option is selected from a dropdown menu. However, I am facing an issue where it overrides the existing dark mode attribute.

The purpose of this script is to modify the color scheme of the website and store the user's preference in local storage.

How can I resolve this conflict?

function updateTheme(value) { 
 var themes = { 
 chb: "griegos", 
 cj: "romanos", 
 hv: "celtas" 
 }; 
 document.getElementById("body").setAttribute("class", themes[value]);
}

.griegos {background: orange}
.romanos {background: purple}
.celtas {background: green}

<body id="body" class="griegos dark">
<select class="forminput" onchange="updateTheme(this.value)"><option value="chb">Camp Half-Blood</option><option value="cj">Camp Jupiter</option><option value="hv">Hotel Valhalla</option></select>

javascript html css

Answer 1

Answer №1

To achieve this, one approach is to utilize the Element.classList API:

// To ensure that we target elements only after the document has loaded and they are present,
// we wait for the 'DOMContentLoaded' event to trigger:
window.addEventListener('DOMContentLoaded', () => {
  // This is a named function that receives the 'evt'
  // (Event Object reference) automatically passed
  // from later use of EventTarget.addEventListener():
  function toggleClass(evt) {

    var index = {
      chb: "griegos",
      cj: "romanos",
      hv: "celtas"
    };

    // Locate the element by its id:
    document.getElementById("body")
      // Use Element.classList.remove() to eliminate
      // previously-selected class names:
      .classList.remove(
        // Construct an Array using spread syntax within
        // the <select> options:
        [...evt.target.options]
          // Array.prototype.map() allows us to generate
          // a new Array based on the existing Array:
          .map(
            // Assign the relevant class name retrieved from
            // the index Object based on the current option's value:
            (opt) => index[opt.value]
        )
      );
    // Once these class names are removed, select the element again
    // according to its id, and apply the appropriate class name
    // from the index Object using Element.classList.add():
    document.getElementById("body").classList.add(
      index[evt.currentTarget.value]
    );
  }

// Use document.querySelector() to locate the <select>
// element with a CSS selector:
document.querySelector('select.forminput')
  // Attach the event listener through
  // EventTarget.addEventListener(), assigning
  // the toggleClass() function to handle the 'change' event:
  .addEventListener('change', toggleClass);
});

.griegos {
  background: orange
}

.romanos {
  background: purple
}

.celtas {
  background: green
}

<body id="body" class="griegos dark">
  <select class="forminput">
    <option value="chb">Camp Half-Blood</option>
    <option value="cj">Camp Jupiter</option>
    <option value="hv">Hotel Valhalla</option>
  </select>
</body>

JS Fiddle demo

Answer 2

To achieve this, one approach is to utilize the Element.classList API:

// To ensure that we target elements only after the document has loaded and they are present,
// we wait for the 'DOMContentLoaded' event to trigger:
window.addEventListener('DOMContentLoaded', () => {
  // This is a named function that receives the 'evt'
  // (Event Object reference) automatically passed
  // from later use of EventTarget.addEventListener():
  function toggleClass(evt) {

    var index = {
      chb: "griegos",
      cj: "romanos",
      hv: "celtas"
    };

    // Locate the element by its id:
    document.getElementById("body")
      // Use Element.classList.remove() to eliminate
      // previously-selected class names:
      .classList.remove(
        // Construct an Array using spread syntax within
        // the <select> options:
        [...evt.target.options]
          // Array.prototype.map() allows us to generate
          // a new Array based on the existing Array:
          .map(
            // Assign the relevant class name retrieved from
            // the index Object based on the current option's value:
            (opt) => index[opt.value]
        )
      );
    // Once these class names are removed, select the element again
    // according to its id, and apply the appropriate class name
    // from the index Object using Element.classList.add():
    document.getElementById("body").classList.add(
      index[evt.currentTarget.value]
    );
  }

// Use document.querySelector() to locate the <select>
// element with a CSS selector:
document.querySelector('select.forminput')
  // Attach the event listener through
  // EventTarget.addEventListener(), assigning
  // the toggleClass() function to handle the 'change' event:
  .addEventListener('change', toggleClass);
});

.griegos {
  background: orange
}

.romanos {
  background: purple
}

.celtas {
  background: green
}

<body id="body" class="griegos dark">
  <select class="forminput">
    <option value="chb">Camp Half-Blood</option>
    <option value="cj">Camp Jupiter</option>
    <option value="hv">Hotel Valhalla</option>
  </select>
</body>

JS Fiddle demo

Set an attribute without replacing any existing class attributes

Answer №1

Similar questions

What exactly do discrete animations entail?

Unable to direct to the main page in index.js of the next.js application

Client-Side Isomorphic JS: A Guide to Using HTTP Requests

Centered HTML Columns on the Screen

Numerous attributes for displaying ngOption values

How can we incorporate "req.getParameter" within a "for loop" to store data in the database based on the user-defined quantity provided in another servlet?

I'm having trouble receiving a response after uploading an image on Cloudinary using React js

Scaling images using jQuery for enhanced visual appeal

Encountering difficulty invoking a component method from d3's call() function

How can we initiate an AJAX request in React when a button is clicked?

Modifying the href attribute of links within various occurrences of an element using jQuery based on its content

Stripping out only the position attribute using jQuery

What is the proper way to utilize useRef with HTMLInputElements?

Ensure that the token remains current with each axios operation

Allow the json array to be transformed into a format suitable for input

JavaScript to enable button functionality for selected items

Tips for arranging cards in columns without causing vertical scrolling to be triggered

What is the best way to update a value and trigger a re-render in ReactJS?

In HTML 5, you can use either #Header or the <header> tag

Is there a quick way to apply the !important rule to all properties in a CSS file?