0

I have a project, but for it to work I need to refresh the page every time I create a new element. The problem is that when I refresh the page it also deletes the created dom elements. Is there a way to reload everything but keep the dom elements until you refresh te page yourself?

    function BTN() {
        for (let i = 0; i < 7; i++) {
            let btn = document.createElement('button');
            btn.classList.add('btn')
            btn.id = 'Button' + i
            btn.innerHTML = 'Button' + i;

            document.getElementsByClassName('Btns')[0].appendChild(btn);
        }
    }

    document.getElementsByClassName('QPB')[0].addEventListener('click', () => {
        BTN()
    })
    .btn {
        width: 100px;
        height: 50px;
        background-color: red;
        margin-right: 10px;
    }

    .QPB {
        width: 50px;
        height: 50px;
        margin-bottom: 10px;
        background-color: orange;
    }
<Button class="QPB">+</Button>
<div class="Btns">

</div>

So I need to refresh the page but not delete all elements. Is there a way to do it?

TLausie
  • 133
  • 5
  • don't refresh the page, or always create the DOM from state every load. – evolutionxbox May 23 '22 at 08:03
  • you can use [localstorage](https://developer.mozilla.org/en-US/docs/Web/API/Window/localStorage) to store count of element and when page refreshes, check the stored count of element then loop to render elements again. On each button click increment the count in localstorage. – Usama May 23 '22 at 08:07
  • @evolutionxbox I'm sorry I don't fully understand. How do I do that? – TLausie May 23 '22 at 08:09
  • @Usama Yeah but doesn't that mean the elements will stay there even if I close the window – TLausie May 23 '22 at 08:10
  • **I need to refresh the page every time I create a new element** why is that? – Lain May 23 '22 at 08:10
  • `document.getElementsByClassName('QPB')[0].addEventListener('click', BTN)` should work as well. No need for an anonymous function here. – Lain May 23 '22 at 08:11
  • @Lain I created a function that keeps a count for all buttons, but when I call the function when loading the page and the buttons are created aftherwards by clicking on a button, it won't work so I need to refresh the page everytime a the btn create button is clicked so it refreshes the function with the right buttons created – TLausie May 23 '22 at 08:12
  • @TLausie yes, but you can remove localstorage on tab close. There may be some kind of code. [link](https://stackoverflow.com/questions/39128931/clear-localstorage-on-tab-browser-close-but-not-on-refresh) – Usama May 23 '22 at 08:13
  • @Usame ohh that could be a solution. I'll look into that thanks – TLausie May 23 '22 at 08:15
  • Feels like a [XY problem](https://xyproblem.info/) to me. Yet if you want [localStorage](https://developer.mozilla.org/en-US/docs/Web/API/Window/localStorage) to be removed on tab close you could just opt for [sessionStorage](https://developer.mozilla.org/en-US/docs/Web/API/Window/sessionStorage) instead. – Lain May 23 '22 at 08:17

0 Answers0