Помогите разобраться.
Есть select, в зависимости от выбора пользователя в id=contact_method подставляются разные номера телефонов.
Теперь необходимо реализовать localStorage чтобы пользователю не приходилось на следующей странице опять выбирать значение из select.
Используя код ниже localStorage работает только для option, как исправить чтобы localStorage работал для option и id=contact_method одновременно?
<select id="contactSelect">
<option value="0">Россия</option>
<option value="1">Беларусь</option>
</select>
<p id="contact_method">+7</p>
JS 1) Функция для замены номера телефона в зависимости от выбора в select
document.getElementById("contactSelect").onchange = function() {
var value = this.options[this.selectedIndex].value;
if(value == '1') {
document.getElementById("contact_method").innerHTML = '+375';
} else {
document.getElementById("contact_method").innerHTML = '+7';
}
}
2) Функция для localStorage
document.getElementById("contactSelect").onchange = function() {
localStorage.setItem('contactSelect', document.getElementById("contactSelect").value);
}
if (localStorage.getItem('contactSelect')) {
document.getElementById("contactSelect").options[localStorage.getItem('contactSelect')].selected = true;
}
if (localStorage.getItem('contactSelect')) {
document.getElementById("contactSelect").options[localStorage.getItem('contactSelect')].selected = true;
document.getElementById("contactSelect").onchange();
}
Несколько слов не для протокола, а "для души". Вы два раза присваиваете значение свойству document.getElementById("contactSelect").onchange. Второе присваивание, естественно, отменяет первое. Чтобы прикрепить несколько обработчиков к одному событию, используйте addEventListener:
function updateContactMethod() {
var value = this.options[this.selectedIndex].value;
if(value == '1') {
document.getElementById("contact_method").innerHTML = '+375';
} else {
document.getElementById("contact_method").innerHTML = '+7';
}
}
document.getElementById("contactSelect").addEventListener("change", updateContactMethod);
document.getElementById("contactSelect").addEventListener("change", function() {
localStorage.setItem('contactSelect', document.getElementById("contactSelect").value);
});
if (localStorage.getItem('contactSelect')) {
document.getElementById("contactSelect").options[localStorage.getItem('contactSelect')].selected = true;
updateContactMethod.call(document.getElementById("contactSelect"));
}
Основные этапы разработки сайта для стоматологической клиники
Продвижение своими сайтами как стратегия роста и независимости