A
A
Alexander2017-02-12 16:42:51
JavaScript
Alexander, 2017-02-12 16:42:51

The DOM element is only hidden from the page when the page is reloaded, not when the page is opened. How to solve the problem?

Hello! I write userscript for VKontakte. The condition of its work: for example, we have a page from which we need to hide or delete an element, for this I use a checkbox and Local Storage to record changes. We go to the page where you want to hide the element, check the checkbox and the element is hidden. But if you open another page in the same tab, and then return to the page where the element was hidden, then it will not be hidden, but visible. In this case, the checkmark will remain in the checkbox (because the changes are saved in LStorage, as well as the changes to hide/show the element). How to fix, friends? On pure JS, without the use of libraries.
Script listing:

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";

}

Answer the question

In order to leave comments, you need to log in

2 answer(s)
D
Dark Hole, 2017-02-12
@abyrkov

Well, there is no condition for restoring invisibility (as well as a checkbox, I don’t see it either).
If you want a normal answer - for the hundredth time I say, upload it to JSFiddle, psychics have gone on vacation.

S
Stalker_RED, 2017-02-12
@Stalker_RED

A string is returned from localStorage and your condition if('false')is always met.
Here is a working one: https://jsfiddle.net/dorhwp6t/5/

Didn't find what you were looking for?

Ask your question

Ask a Question

731 491 924 answers to any question