The task is to click on a button, save its id and apply it to the elements of nav__elem , so that when you click, for example, <button id="module-1"> , the selected class is applied to this button, and the selected class is also added to <span class="nav__elem module-1">nav elem 1</span> and so that when you reload the page, the changes are preserved, but if you click on the active button, the selected class will be deleted from the button and nav__elem module-1. Without using es6, multiple elements can be selected, not just one

 <div class="nav"> <span class="nav__elem module-1">nav elem 1</span> <span class="nav__elem module-2">nav elem 2</span> <span class="nav__elem module-3">nav elem 3</span> </div> <div class="btns"> <button id="module-1">elem 1</button> <button id="module-2">elem 2</button> <button id="module-3">elem 3</button> </div>

    2 answers 2

    Here the example will not work ... The question was decided not without the help of colleagues ...

     let button = document.getElementsByClassName("button"); let module = document.getElementsByClassName("module"); var elem = []; for (let i = 0; i < button.length; i++) { button[i].addEventListener("click", function() { module[i].classList.toggle("selected"); button[i].classList.toggle("selected"); elem = []; for (let i = 0; i < button.length; i++) { if (button[i].classList.contains("selected")) { elem.push(i); } } localStorage.setItem("elem", JSON.stringify(elem)); }); } window.onload = function() { if (localStorage.getItem("elem")) { var elemZ = localStorage.getItem("elem"); var lsArr = JSON.parse(elemZ); for (let i = 0; i < lsArr.length; i++) { button[lsArr[i]].classList.add("selected"); module[lsArr[i]].classList.add("selected"); } } }; 
     <div class="nav"> <span class="nav__elem module module-1">nav elem 1</span> <span class="nav__elem module module-2">nav elem 2</span> <span class="nav__elem module module-3">nav elem 3</span> </div> <div class="btns"> <button class="button" id="module-1">elem 1</button> <button class="button" id="module-2">elem 2</button> <button class="button" id="module-3">elem 3</button> </div>

    • without es6, please show how to do it - Dima Vleskov
    • Just a minute ... right now, I'll show you ... - Air
    • Thanks, it works fine, I only have a question, here it is possible that several elements were chosen, not only one, it is possible and more, I try to correct your code, but something does not come out - Dima Vleskov
    • Dima Vleskov, really explain .. what ale? - Air
    • it is possible not only for example elem 1 (nav elem1) to be selected, but you can choose elem1 (nav elem1), elem2 (nav elem2) ... but right now only one element can be active - Dima Vleskov

    I solved this problem through localStorage:

     function initModules() { if (localStorage.getItem('favModules')) { var favModules = JSON.parse(window.localStorage.getItem('favModules')); for (let i = 0; i < favModules.length; i++) { $("#"+favModules[i]).addClass("selected"); $("."+favModules[i]).addClass("selected"); } } else { return false; } }; initModules(); function setModules() { var favModules = []; $("button").click(function () { if (!$(this).hasClass("selected")) { var elem = $(this).attr("id"); $(this).addClass("selected"); $("." + elem).addClass("selected"); } else { var elem = $(this).attr("id"); $(this).removeClass("selected"); $("." + elem).removeClass("selected"); } favModules = []; $("button.selected").each(function () { var self = $(this).attr("id"); favModules.push(self); }); window.localStorage.setItem('favModules', JSON.stringify(favModules)); }); }; setModules();
    • Well, I suffered, thank you for the question ... I was interested in solving it))) But I decided not without help ... - Air