Элемент DOM скрывается со страницы лишь после перезагрузки страницы, но не при ее открытии. Как решить проблему?

Здравствуйте! Пишу userscript для ВКонтакте. Условие его работы: к примеру, у нас есть страница, с которой нужно скрыть или удалить элемент, для этого я использую checkbox и Local Storage для записи изменений. Заходим на страницу, где нужно скрыть элемент, ставим галочку на чекбос и элемент скрывается. Но если в этой же вкладке открыть другую страницу, а потом вернуться на ту страницу, где скрыли элемент, то он будет не скрытым, а видимым. При этом галочка будет оставаться в чекбосе (потому что изменения сохранены в LStorage, как и изменения скрытия\показа элемента). Как исправить, друзья? На чистом JS, без использования библиотек.

Листинг скрипта:
var page_cover = document.getElementsByName('.top_home_logo');
var logo = document.createElement('div');
var side_bar_inner = document.getElementById('side_bar_inner');
logo.innerHTML = '<a id="toggler" href="#">Script</a><div id="box" style="display: none;"><input type="checkbox" id="rem">Удалить логотип</div>';
logo.style = 'width: 150px';
side_bar_inner.appendChild(logo);


window.onload= function() {
    document.getElementById('toggler').onclick = function() {
        openbox('box', this);
        return false;
    };
};
function openbox(id, toggler) {
    var div = document.getElementById(id);
    if(div.style.display == 'block') {
        div.style.display = 'none';
        toggler.innerHTML = 'Script';
    }
    else {
        div.style.display = 'block';
        toggler.innerHTML = 'Script';
    }
}

document.getElementById('rem').onclick = function() {
    if(document.getElementById('rem').checked) {
        localStorage.setItem('rem', "true");
      document.querySelector(".top_home_logo").style.display= "none";
        localStorage.setItem('text', "true");
    } else {
        localStorage.removeItem('rem', "false");
        document.querySelector(".top_home_logo").style.display = "";
        localStorage.removeItem('text');

    }
};
if (localStorage.getItem('rem') == "true") {
    document.getElementById("rem").setAttribute('checked','checked');
    document.querySelector(".top_home_logo").style.display = "none";

}
  • Вопрос задан
  • 282 просмотра
Пригласить эксперта
Ответы на вопрос 2
abyrkov
@abyrkov
JavaScripter
Ну так нет условия восстановления невидимости(как и чекбокса, я тоже не вижу).
Если хотите нормальный ответ - в сотый раз говорю, заливайте на JSFiddle, экстрасенсы свалили в отпуск.
Ответ написан
Stalker_RED
@Stalker_RED
Из localStorage возвращается строка, и ваше условие if('false') всегда выполняется.
Вот работающий вариант: https://jsfiddle.net/dorhwp6t/5/
Ответ написан
Комментировать
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Похожие вопросы