Очистка локального хранилища кнопки

#javascript #html #css

#javascript #HTML #css

Вопрос:

Эй, ребята, у меня есть html-страница с двумя кнопками. Я включил локальное хранилище, чтобы 2 кнопки не теряли свой цвет при обновлении страницы. Но проблема, с которой я сталкиваюсь, заключается в том, что при нажатии одной кнопки другая не теряет свой цвет. Чего я хочу добиться, так это того, что при нажатии на одну кнопку другая кнопка должна потерять свой цвет. Тогда я смогу узнать, какая кнопка активна. Я перепробовал много методов, но потерпел неудачу. Любая помощь приветствуется. Спасибо!!

 <!DOCTYPE html>
<html lang="en">
<head>
<style>
    .button {
      box-shadow: -2px 2px blanchedalmond, -1px 1px orange, -1px 1px orange;
      margin-top: 280px; 
      margin-left: 420px;    
      background-color:rgb(128, 128, 128); 

      border: none;
      color: white;
      padding: 30px 35px;
    }

    .button-green, .button:focus {
      background-color:rgba(10, 170, 10, 0.952);
    }



    .button1 {
      box-shadow: -2px 2px blanchedalmond, -1px 1px orange, -1px 1px orange;
      margin-top: 280px; 
      margin-left: 420px;    
      background-color:rgb(128, 128, 128); 

      border: none;
      color: white;
      padding: 30px 35px;

    }

    .button1-green, .button1:focus {
      background-color:rgba(10, 170, 122, 0.952);
    }


  </style>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="x-UA-Compatible" content="ie=edge">
  <title>Terravision pty ltd</title>


  </head>
  <body>
  
  <div style = "position:fixed; left:-300px; top:-100px;">

<!----------------------------------------------------------------------------->

    <form id="form" method="get" action="" >     
    <button  class="button" >Lights On</button>
    </form>

    <form id="form1" method="get" action="" >
    <button  class="button1" >Lights Off</button>
    </form>

<!----------------------------------------------------------------------------->



<script>
 

    if (localStorage.getItem('formSubmitted') === 'yes') {
            for(const button of document.getElementsByClassName('button')) {
                button.classList.add('button-green')
            }
        }
        document.getElementById('form').addEventListener('submit', (event) => {
            localStorage.setItem('formSubmitted', 'yes');
        })  
     

if (localStorage.getItem('formSubmitted1') === 'yes') {
            for(const button of document.getElementsByClassName('button1')) {
                button.classList.add('button1-green')
            }
        }
        document.getElementById('form1').addEventListener('submit', (event) => {
            localStorage.setItem('formSubmitted1', 'yes');
        })


</script>
  
</div>
</body>
</html>
 

Ответ №1:

Хорошо, итак, в основном вам не хватает удаления класса кнопок без нажатия, если он активен.

Сначала вы нажимаете кнопку 1, и она становится зеленой. Затем вы нажимаете кнопку 2, и она становится зеленой. Но проблема в том, что теперь обе кнопки зеленые.

что вам нужно сделать, так это при нажатии кнопки выполнить поиск класса button1-green . Если он существует, удалите его.

И то же самое касается кнопки 1. (найдите зеленую кнопку и удалите ее)

Что-то вроде:

    if (localStorage.getItem('formSubmitted') === 'yes') {
            for(const button of document.getElementsByClassName('button')) {
                button.classList.add('button-green')
            }
           var button1 = document.getElementByClassName("button1-green");
           if(button1) button1.classList.remove("button1-green");
     }
        document.getElementById('form').addEventListener('submit', (event) => {
            localStorage.setItem('formSubmitted', 'yes');
        })
 

Комментарии:

1. Я попробовал это, теперь цвет «Выключен» исчезает. Но теперь, когда я нажимаю кнопку выключения, цвет подсветки по-прежнему сохраняется, и к выключенному свету не применяется цвет. Это то, что я добавил, если (localStorage.GetItem(‘formSubmitted1’) === ‘yes’){ for(постоянная кнопка document.getElementsByClassName(‘button1’)) { button.classList.add(‘button1-green’) } var button = document.getElementByClassName(«кнопка-зеленый»); если (кнопка) button.classList.remove(«кнопка-зеленый»); } document.getElementById(‘form1’).addEventListener(‘submit’, (событие) => { localStorage.setItem(‘formSubmitted1′,’yes’);})

2. Я думаю, проблема в том, что цвет выходит из локального хранилища и, следовательно, его просто нельзя удалить, пока не будет очищено локальное хранилище для этой кнопки?

Ответ №2:

Я думаю, вы можете упростить свой код до чего-то подобного. Я помещаю заметки внутрь.

 <style>
.clicked {background-color: green;} 
</style>
<button id="button1">Button1</button>
<button id="button2">Button1</button>
<script>
// this will hold all buttons that you want to control
const btns = document.querySelectorAll('button'); 
// iterate them
for (var i=0; i < btns.length; i  ) { 
    // add click event listener 
    btns[i].addEventListener('click', function () {
        // remove the current clicked class (if present)
        if(document.querySelector('.clicked')) {document.querySelector('.clicked').classList.remove('clicked')};
        // save the current button to locasorage
        localStorage.setItem('formSubmitted', this.id); 
        // mark the clicked button
        markBtn();
    });
}
// this will mark a button if it exist on local storage
function markBtn () {
    if (localStorage.getItem('formSubmitted')) {
        let clickedBtn = localStorage.getItem('formSubmitted');
        document.querySelector('#' clickedBtn).classList.add('clicked');
    }
}
// don't forget to call this function when page load
markBtn();
</script>
 

Редактировать что касается комментариев:

 <style>
.clicked {background-color: green;} 
</style>
<form>
<button id="button1">Button1</button>
</form>
<form>
<button id="button2">Button2</button>
</form>
<form>
    <button id="button3">Button3</button>
</form>
<script>
// this will hold all buttons that you want to control
const btns = document.querySelectorAll('button'); 
// iterate them
for (var i=0; i < btns.length; i  ) { 
    // add click event listener 
    btns[i].addEventListener('click', function () {
        // remove the current clicked class (if present)
        if(document.querySelector('.clicked')) {document.querySelector('.clicked').classList.remove('clicked')};
        // save the current button to locasorage
        localStorage.setItem('formSubmitted', this.id); 
        // mark the clicked button
        markBtn();
    });
}
// this will mark a button if it exist on local storage
function markBtn () {
    if (localStorage.getItem('formSubmitted')) {
        let clickedBtn = localStorage.getItem('formSubmitted');
        document.querySelector('#' clickedBtn).classList.add('clicked');
    }
}
// don't forget to call this function when page load
markBtn();
</script>
 

Комментарии:

1. Привет, большое спасибо за ваш ответ. Но я хочу поместить свои кнопки внутри формы, поскольку им нужен доступ к файлу на моем сервере.

2. С помощью этого кода вы можете изменить свою разметку на что угодно… Это работает с идентификатором кнопки, поэтому при нажатии на кнопку текущий идентификатор сохраняется в locastorage клиента. Проверить обновление

Ответ №3:

Вы используете один и тот же ключ FormSubmitted в локальном хранилище для обеих кнопок. Поэтому, когда вы устанавливаете FormSubmitted как ‘yes’, вы получаете оба оператора if и добавляете button-green и button-green1 к кнопкам.

Попробуйте использовать две разные переменные для двух форм. что-то вроде FormSubmitted и form1Submitted будет работать.

Комментарии:

1. Так что извини, чувак. Мой исходный код был таким. Я думаю, что это была опечатка. Теперь я внес изменения в свой код. Но реальная проблема, с которой я сталкиваюсь, заключается в том, что цвет кнопки 1 не исчезает при нажатии кнопки 2. Так что, по сути, если я нажму кнопку включения, она будет зеленой, а если я нажму кнопку выключения, она также станет зеленой. Итак, теперь у меня есть две кнопки зеленого цвета. Спасибо

2. О, я понимаю. Нет проблем.