Zresetowanie diva

Question

Witam, mam diva w którym są wykonywane kilka skryptów js i zawartość diva się zmienia. Chce by inna funkcja zresetowała tego diva, by był tak jakbym otworzyl na nowo strone i było można ponownie użyć skryptów js w divie. bez refreshu strony, tylko zresetowac diva. Pomozecie jak tego dokonac?

Answer 1

Skoro zawartość tego diva się zmienia po wykonaniu jakichś funkcji, które napisałeś to w czym problem żeby napisać nową funkcje, która również zmieni zawartość diva z tym, że do stanu początkowego?

Comments

Pobierz outerHTML, lub innerHTML przed zmianą zawartości i zapisz do zmiennej, którą potem wykorzystasz jako " reset"

---

@BT101,

Próbuje i coś mi nie wychodzi, możesz dać przyklad w kodzie?

---

Pokaż najpierw w jaki sposób zmieniach content w divach w tych twoich funkcjach

---

@Bartosz Kamiński,

<div id="content">
      <h1>Orginalna zawartosc diva</h1>
      <p>Tresc orginalnego diva</p>
</div>
<button>zmien</button>

body{
  background-color: #000;
  color: #fff;
}
div{
  width: 400px;
  margin: 0 auto;
}
button{
  display: block;
  width: 100px;
  margin: 0 auto;
  padding: 5px;
  border: none;
  background-color: green;
  color: #fff;
  transition: all .5s;
}

.danger{
  background-color: red;
}

var btn = document.querySelector('button');
var content = document.getElementById('content');
var orginContent = content.innerHTML;
var state = true;
function change(){
  if(state){
        content.innerHTML = "<h1>Nowa zawartosc diva</h1><p>Tresc nowego diva</p>";
        btn.textContent = 'wroc';
        btn.classList.add('danger');
        state = false;
        }
        else{
        content.innerHTML = orginContent;
        btn.textContent = 'zmien';
        btn.classList.remove('danger');
        state = true;
        }}
btn.addEventListener('click',change);

 

---

@BT101,

 

	<div id="missionContainer">
	<div id="kostkaw">
	<button type="submit" id="throwdicew" onclick="rzutKostka()">Rzuć kostką</button>
	</div>
	<div id="kostkam" >
	<button type="submit" id="throwdicem" onclick="rzutKostka2()">Rzuć kostką</button>
	</div>
							
	</div>
					
								
	<div id="who"></div>
							
	<div id="task"></div>

function rzutKostka()
	{
		
	 ktoryPrzycisk++;
	document.getElementById("kostkaw").innerHTML = kostka;
  if (ktoryPrzycisk == 2) {
        winner();
    }
	}

function rzutKostka2()
	{
    ktoryPrzycisk++;
	document.getElementById("kostkam").innerHTML = kostka2;
	if (ktoryPrzycisk == 2) {
        winner();
		}
	}
	
	function winner() {
    if (numer > numer2) {
	hide();
	}
	else if (numer < numer2) {
	hide();
	 }
	else{
	reload()
	
	}
	}

	

W missionContainer sa dwa przyciski, gdy sie na nie kliknie losuje kostke. Nie wiem jak ponownie załadować tego diva by potem ponownie można było losować kostke.

---

Ja tu nie widzę logiki losowania, jest za to pełno niezadeklarowanych zmiennych, zmienna kostka i kostka2 nie istnieją a próbujesz je wrzucać do diva. A tak btw będzie ci łatwiej jak będziesz miał ładnie kod ułożony a nie tak jak teraz..

I po co używasz innerHTML na elemencie gdzie masz te guziki, to podmieni zawartość diva i guziki znikną nie lepiej po prostu wrzucać wynik działania do jakiegoś innego diva?

---

To jest czesc kodu, zmienne sa ale nie wkleilem tu

Answer 2

Najpierw musisz przywrócić diva do postaci początkowej jeżeli jest pusty to nie ma problemu pobierasz go po id czy klasie i ustawiasz mu innerHTML = ' ';

No i oczywiście musisz poprostu uruchomić te funkcję jaszcze raz masz kilka możliwości:

1. setTimeout uruchomi ci funkcję po jakimś czasie

2. przycisk znajdujący się gdzie indziej który po kliknięciu uruchomi tą funkcję