Слетает цвет после работы скрипта
Ребята помогите пожалуйста, при перезагрузке страницы слетает цвет селекта в дефолт вот код
<style>
.n {
font-weight:bold;
font-size:18px;
background:#E19D9D; color: #5E5E5E;
border: 0px;
padding: 10px;
-webkit-appearance: none;appearance: none;-moz-appearance: none;
}
.y {
font-weight:bold;
font-size:18px;
background:#9DE1A0; color: #5E5E5E;
border: 0px;
padding: 10px;
-webkit-appearance: none;appearance: none;-moz-appearance: none;
}
</style>
<table>
<tbody>
<tr>
<td style="width: 5px; text-align: center;">
<select class="n" onclick="className=selectedIndex?'y':'n';" id="fruit">
<option class="n" value="0">Ожидание</option>
<option class="y" value="1">Отправлен</option>
</select></td>
<td style="width: 50px; text-align: center;">Ячейка №1</td>
<td style="width: 50px; text-align: center;">Ячейка №2</td>
<td style="width: 50px; text-align: center;">Ячейка №3</td>
</tr>
</tbody>
</table>
<script>
document.getElementById("fruit").onchange = function(ter) {
localStorage.setItem('fruit', document.getElementById("fruit").value);
}
if (localStorage.getItem('fruit')) {
document.getElementById("fruit").options[localStorage.getItem('fruit')].selected = true;
}
</script>
кто может ткните меня носом что не так уже два часа как пытаюсь простите в js еще новичек если есть у кого идея более простой реализации этого момента с радостью выслушаю |
к сожалению не помогло
если так, то слетает полностью все значение при перезагрузке страницы, даже текст |
может с чекбоксом аля так попробовать
<input type="checkbox" id="stat">
<script>
document.getElementById('stat').onclick = function() {
if(document.getElementById('stat').checked) {
localStorage.setItem('stat', "true");
} else {
localStorage.setItem('stat', "false");
}
}
if (localStorage.getItem('stat') == "true") {
document.getElementById("stat").setAttribute('checked','checked');
}
</script>
только не пойму как css привязать свой сюда |
новый вася,
:-?
<!DOCTYPE HTML>
<html>
<head>
<title>Untitled</title>
<meta charset="utf-8">
</head>
<body>
<style>
.n {
font-weight:bold;
font-size:18px;
background:#E19D9D; color: #5E5E5E;
border: 0px;
padding: 10px;
-webkit-appearance: none;appearance: none;-moz-appearance: none;
}
.y {
font-weight:bold;
font-size:18px;
background:#9DE1A0; color: #5E5E5E;
border: 0px;
padding: 10px;
-webkit-appearance: none;appearance: none;-moz-appearance: none;
}
</style>
<table>
<tbody>
<tr>
<td style="width: 5px; text-align: center;">
<select class="n" id="fruit">
<option class="n" value="0">Ожидание</option>
<option class="y" value="1">Отправлен</option>
</select></td>
<td style="width: 50px; text-align: center;">Ячейка №1</td>
<td style="width: 50px; text-align: center;">Ячейка №2</td>
<td style="width: 50px; text-align: center;">Ячейка №3</td>
</tr>
</tbody>
</table>
<script>
document.getElementById("fruit").onchange = function(ter) {
localStorage.setItem('fruit', this.value);
document.getElementById("fruit").className = ["n","y"][this.value];
}
if (localStorage.getItem('fruit') != null) {
document.getElementById("fruit").value = localStorage.getItem('fruit');
document.getElementById("fruit").className = ["n","y"][localStorage.getItem('fruit')];
}
</script>
</body>
</html>
|
огромное спасибо работает ))
|
но все равно к сожалению если добавить на страницу еще одну такую же таблицу то элемент в ней все равно работает не корректно ( слетает при перезагрузке))
Все еще в поисках решения, заранее всем спасибо..... |
новый вася,
Цитата:
|
предполагаю что при добавлении счетчика i++ для каждого следующего элемента, функционал этого кода будет соответствовать требуемому, но к сожалению мои знания в сфере js реализовать этого не позволяют
|
Помогите с сайтом bytovaytehnika.ru , при переходе в любую под категорию bytovaytehnika.ru/malaya/blender - сайт слетает, задний фон стирается и становиться полностью кривым
|
| Часовой пояс GMT +3, время: 02:01. |