• Jobs
  • About Us
  • professionals
    • Home
    • Jobs
    • Courses and challenges
    • Questions
    • Teachers
  • business
    • Home
    • Post vacancy
    • Our process
    • Pricing
    • Assessments
    • Payroll
    • Blog
    • Sales
    • Salary Calculator

0

123
Views
change document stylesheet with select tag in javascript

I have a drop down box on my website that lets you select your theme. The problem is that I can't figure out how to implement it. Here's the javascript:

//selects the select element
let selectTheme = document.querySelector("#select-theme");
//selects the stylesheet
let style = document.querySelector("#pagestyle");


selectTheme.addEventListener('onchange', () => {
  if (selectTheme.value == "dark") {
    style.setAttribute("href", "./css/style.css");
  }
  if (selectTheme.value == "light") {
    style.setAttribute("href", "./css/style2.css");
  }
  console.log(selectTheme.value);
})

HTML:

<link rel="stylesheet" type="text/css" href="" id="pagestyle">

<div class="selection-box">
      <select class="select-theme" name="selectTheme" id="select-theme">
        <option value="dark" id="dark">dark</option>
        <option value="light" id="light">light</option>
      </select>
    </div>

The even listener itself doesn't seem to work, as it doesn't print out the drop down value.

Also note that this isn't all of my HTML. I just copied and pasted the relevant elements.

almost 3 years ago · Juan Pablo Isaza
1 answers
Answer question

0

The eventlistener is change not onchange Once you change it your console.log will work

https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/change_event

almost 3 years ago · Juan Pablo Isaza Report
Answer question
Find remote jobs

Discover the new way to find a job!

Top jobs
Top job categories
Business
Post vacancy Pricing Our process Sales
Legal
Terms and conditions Privacy policy
© 2025 PeakU Inc. All Rights Reserved.

Andres GPT

Recommend me some offers
I have an error