Now I have two divas, by clicking on which the value of the variable changes. And depending on this value, the background of the site changes. This is done like this:

 document.body.classList.add('n1'); body.n1 { background-image: url("/images/fon/43.jpg"); }

But the change itself happens only after the page is updated, so I had to make a div inside the empty link:

 <a href=""> <div id="fon2" class="fon2"> <img src="/images/main3.jpg" alt="текст"> </div> </a>

Can I make a background change without refreshing the page?

  • And where is the variable? Why variable, if you can immediately change the class? - Russian Bear
  • I did not clutter up the code showing the variable, because it does not apply to the question .. the variable is needed to determine which div was pressed, then it is written to LS and displayed in a specific css file, where the background is set, using if the variable is "1", then ... if "2", then ... - user250973
  • No variable is needed for this. Instead of the value of a variable, change the class to the desired element at once - Russian Bear
  • I suspect that the script with the condition fulfills when the page is loaded to the current value of the variable, and that its value has changed already - it does not matter - Russian Bear
  • one
    So push the condition into the function and execute it when you click on the div - Russian Bear

1 answer 1

Made a few modifications to your code. The clickable elements are combined into one .fon class, so you can hang a click event handler in a loop. Those. when adding a new "square" you will not need to add code for it in js. Removed links as unnecessary, and did not understand what your problem with them. Variable and functions renamed to more understandable. Note that working with localStorage is wrapped in try-catch blocks due to limitations in snippets on StackOverflow. Because of the same limitations, background preservation does not work. An example without try-catch and with working saving is on https://jsfiddle.net/br3t/uttj8foy/ .

 var backgroundClass = 'n1'; //* Сохранение выбранного фона в localStorage function saveBackground() { try { localStorage.setItem("object", backgroundClass); } catch (e) {}; } //* Чтение фона из localStorage и применение function getBackground() { try { if (localStorage.getItem("object")) { backgroundClass = localStorage.getItem("object"); } } catch (e) {}; appendBackground(); } //* Применение фона к body function appendBackground() { document.body.className = backgroundClass; } getBackground(); //* обработка кликов по образцам var backgrounds = document.querySelectorAll('.fon'); for(var i = 0; i < backgrounds.length; i++) { backgrounds[i].addEventListener('click', function() { backgroundClass = this.getAttribute('data-class'); saveBackground(); appendBackground(); }); } 
 body { min-width: 640px; min-height: 480px; } .fon { width: 50px; height: 50px; border: 3px solid #FFF; display: inline-block; cursor: pointer; overflow: hidden; margin: 10px; } body.n1 { background-image: url("https://via.placeholder.com/300/F00/FFF"); } body.n2 { background-image: url("https://via.placeholder.com/300/0F0/FFF"); } body.n3 { background-image: url("https://via.placeholder.com/300/00F/FFF"); } body.n4 { background-image: url("https://via.placeholder.com/300/FF0/FFF"); } 
 <div id="fon1" class="fon" data-class="n1"> <img src="https://via.placeholder.com/300/F00/FFF" alt="текст"> </div> <div id="fon2" class="fon" data-class="n2"> <img src="https://via.placeholder.com/300/0F0/FFF" alt="текст"> </div> <div id="fon3" class="fon" data-class="n3"> <img src="https://via.placeholder.com/300/00F/FFF" alt="текст"> </div> <div id="fon4" class="fon" data-class="n4"> <img src="https://via.placeholder.com/300/FF0/FFF" alt="текст"> </div>

  • I think it's better to .className = backgroundClass with .classList.add(backgroundClass) - webDev_
  • Better not worth it. - Arnial
  • one
    If you click on blue, then green, then blue again. Then at the end the background should be blue. If done through classList.add , then the last blue will not be added, since the element will already have after the first click (I'm not sure that the green one will work, because it will simply be added to the end of the class attribute). If you really want to use classList.add then you need to delete the old classes of backgrounds. In order not to bother with this it is easier to use className . - Arnial
  • Yes exactly. did not pay attention. Of course, it would be better to store the links in the repository, rather than classes - webDev_
  • @webDev_, of course, even throw links to images from CSS and substitute directly from HTML, but this is all at the discretion of the author of the question. - br3t