#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. О, я понимаю. Нет проблем.