I read Google . It seems to do correctly, but does not work. There are no errors in the console.

When the checked line is created, the link with the path to the css file, when there is no checked line is deleted. Recorded in localStorage (отображается в хранилище данные) .

I wrote an If condition, but when updating the page, the checked page is not set.

I do not know where to dig without errors in the console.

I work for the first time with localstorage

 function darkTheme() { var checkbox = document.getElementById('darkTheme'), newLink = document.createElement('link'), head = document.getElementById('head'); if (checkbox.checked) { newLink.rel = "stylesheet"; newLink.href = "theme-for-night.css"; newLink.id = "link"; head.insertBefore(newLink, head.children[7]); //создать link на 7ой строчке родителя head localStorage.setItem('darkTheme', 'on'); //on если checked } else { link.remove(newLink); localStorage.setItem('darkTheme', 'off'); //off если убран checked } } window.onload = function() { if (localStorage.getItem('darkTheme') == 'on') { document.getElementById('darkTheme').checked = true; } } 
 <head id="head"> <link href="styles.css" rel="stylesheet"> <!--Основной файл стилей--> <!--Эта строка добавляется если checked и удаляется если не checked. Файл с ночной темой--> <link href="theme-for-night.css" rel="stylesheet" id="link"> </head>

Suddenly, it will help someone from the newbies:

  <script> function darkTheme() { var inp = document.getElementById('darkTheme'); // if(inp.checked){ changeTheme();//Фунция добавить тему localStorage.setItem('darkTheme', 'on'); }else{ removeTheme();//Функция удалить тему localStorage.setItem('darkTheme', 'off'); } } //Включить тему, если darkTheme = 'on' function changeTheme() { var head = document.getElementById('head'), createLink = document.createElement('link'); // createLink.rel = "stylesheet"; createLink.href = "theme-for-night.css"; createLink.id = "link"; head.insertBefore(createLink, head.children[7]); } //Удалить тему, если darkTheme = 'off' function removeTheme() { var rm = document.getElementById('link'); rm.remove(); } //Функция на загрузку страницы window.onload = function() { var inp = document.getElementById('darkTheme'); if(localStorage.getItem('darkTheme') == 'on'){ changeTheme(); inp.checked = true; } } </script> <div> <!-- кнопка которая добавляет строчку с id="link" --> <input type="checkbox" id="darkTheme" onclick="darkTheme()"> </div>
  • What code is called during page loading? - Igor
  • Show all the code - Air
  • @Air look here please jsfiddle.net/9txfn6g0/2 . Now, when the page is reloaded, if in the store the value is on, then the checkbox is set, but the link is not created. - Disciple
  • @Igor look here please jsfiddle.net/9txfn6g0/2. Now, when the page is reloaded, if in the store the value is on, then the checkbox is set, but the link is not created. What am I doing wrong? - Apprentice
  • var checkbox = document.getElementById('darkTheme') The first thing that caught my eye was that I did not find the name of the checkbox variable in the reserved words JS , but precisely because of this, your script does not see input and the second is not the name of the dar*l*Theme function dar*l*Theme but it should be dar*k*Theme - Air

2 answers 2

An example here will not work ....

 const input = document.querySelector('input'); input.addEventListener('input', () => { if (input.checked) { addDarkTheme(); localStorage.setItem('theme', 'on'); console.log(localStorage.theme); } else { removeDarkTheme(); localStorage.setItem('theme', 'off'); console.log(localStorage.theme); } }) function addDarkTheme() { document.querySelector('head').insertAdjacentHTML('beforeEnd', '<link rel="stylesheet" id="dark-theme" href="theme-for-night.css"/>'); } function removeDarkTheme() { document.querySelector('#dark-theme').remove(); } window.onload = () => { if (localStorage.theme == 'on') { addDarkTheme(); input.checked = true; } } 
 <input type="checkbox" id="input">

  • This code works correctly, but it is not indicative in terms of the mistake that the author made, but from me plus is Stranger in the Q
  • @StrangerintheQ, I described the errors in the comments, Thank you - Air
  • However, the error was different, look at my answer =) - Stranger in the Q
  • I agreed, but this is not the only mistake - Air
  • This means that the author corrected the question - Stranger in the Q

As for the checkbox - you are not looking for it correctly on the page, you have it set with id="checkbox" , but you are looking for it document.getElementById('darkTheme')

Here is the working code, in it I just changed the identifier in the markup to "darkTheme" :

 function darkTheme() { var checkbox = document.getElementById('darkTheme') if (checkbox.checked) { localStorage.setItem('darkTheme', 'on'); //on если checked } else { localStorage.setItem('darkTheme', 'off'); //off если убран checked } } window.onload = function() { if (localStorage.getItem('darkTheme') == 'on') { document.getElementById('darkTheme').checked = true; } } 
 <div> <input type="checkbox" id="darkTheme" onclick="darkTheme()"> </div>

  • Wait, how is it different from mine and why does it work? But looking at your code, I had an idea how to write the same thing, but working without using ready-made code from below that gave @Air - Pupil
  • @ OlegBykov I wrote in the answer, <input type = "checkbox" id = "darkTheme" onclick = "darkTheme ()">, pay attention to id = "darkTheme", you had id = "checkbox" there - Stranger in the Q
  • Ah, I apologize) I just wrote everything at night, and indicated id = "checkbox" by accident. In the editor with the code is id = "darkTheme". - Apprentice
  • @OlegBykov No problem, it means there were some other mistakes that you have already corrected - Stranger in the Q
  • Keep a plus ....... - Air