Выпадающий выбор перезагружает к первому варианту при перезагрузке - PullRequest
Новая
       74

Выпадающий выбор перезагружает к первому варианту при перезагрузке

0 голосов
/ 20 июня 2020

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

Вот скрипка: 

function selectCss(element) {
  const a = element.options[element.selectedIndex].value;

  document.getElementById("change").onchange = function() {
    localStorage['colorPick'] = element.options[element.selectedIndex].value;
  }
  window.onload = function() {
    if (localStorage['colorPick'])
      document.getElementById("change").value = localStorage['colorPick'];
  }

  if (a == "Theme 1") {
    document.body.style.background = "pink";

  }

  if (a == "Theme 2") {
    document.body.style.background = "blue";
  }

  if (a == "Theme 3") {
    document.body.style.background = "yellow";
  }
}
body {
  background: pink;
}
<select  id="change" name="colorPick"  onchange="selectCss(this)">
  <option selected value="Theme 1">Theme 1</option>
  <option value="Theme 2">Theme 2</option>
  <option value="Theme 3">Theme 3</option>
</select>

Ответы [ 2 ]

1 голос
/ 20 июня 2020

У кода есть несколько проблем:

  1. Значение select и color должно быть установлено, если в localStorage есть элемент. Это должно быть сделано сначала вместо того, чтобы делать это внутри функции.
  2. Лучше использовать else-if вместо того, чтобы сравнивать значение три раза.
  3. Слушатель уже установлен onchange в элемент html, поэтому его не следует объявлять в функции.
  4. Вы можете определить элемент один раз и использовать его все время.
  5. Вы можете получить выбранное значение, используя select.value, где select - это элемент html в этом примере

Рабочее решение с соответствующими изменениями будет следующим: 

let select = document.getElementById("change")
if (localStorage['colorPick']){
     select.value = localStorage['colorPick'];
     selectCss();
}
function selectCss() {
     const a = select.value;
     localStorage['colorPick'] = a;
     if (a == "Theme 1") {
          document.body.style.background = "pink";
     }else if (a == "Theme 2") {
          document.body.style.background = "blue";
     }else if (a == "Theme 3") {
          document.body.style.background = "yellow";
     }
}
body {background: pink;}
<select  id="change" name="colorPick"  onchange="selectCss()">
     <option selected value="Theme 1">Theme 1</option>
     <option value="Theme 2">Theme 2</option>
     <option value="Theme 3">Theme 3</option>
</select>
0 голосов
/ 20 июня 2020

Используйте метод setItem для сохранения в локальное хранилище.

localStorage.setItem ("colorPick", element.options [element.selectedIndex] .value);

Используйте метод getItem для получения

пусть colorPick = localStorage.getItem ("colorPick")

...