Jak zapisac wyniki do tablicy w JS

Question

Witam,

Mam taki kod, który generalnie działa i wszystko było by ok, gdyby nie to ze każdy nowo dodany wpis dodaje się na gorze listy jako pierwszy, a chciałbym zeby była zachowana chronologia dodawania rekordów. Czyli pierwszy wpis, pozycja na liscie nr.1 wpis drugi, pozycja na liscie nr.2 itd. Nie za bardzo potrafię zapisac tych rekordów do tablicy, co by mi pomoglo posortowac oraz wywalic tagi html, które teraz dodaje. Tak bym sie dostał po numerze indexu.

pozdrawiam

function lista(skladniki_wykon)
	{
		var dodaj_skladnik = document.getElementById("dodaj_skladnik").value;
		var skladniki = document.getElementById("skladniki").innerHTML;
		var lista_skladnikow = "";
		
		var dodaj_krok = document.getElementById("dodaj_wykonanie").value;
		var kroki = document.getElementById("wykon").innerHTML;
		var lista =[];
		
		switch (skladniki_wykon)
		{
			case 1:
			lista_skladnikow = "<li>"+dodaj_skladnik+skladniki+"</li>";
			document.getElementById("skladniki").innerHTML = lista_skladnikow;
			document.getElementById("dodaj_skladnik").value ="";
			break;
					
			case 2:
			lista[lista.push] = "<li>"+dodaj_krok+kroki+"</li>";
			
			document.getElementById("wykon").innerHTML = lista;
			document.getElementById("dodaj_wykonanie").value ="";	
			break;
		}	
	
	}

 

Comments

Nie widzę, aby w tym kodzie jakikolwiek wpis dodawał się do jakiejkolwiek niepustej listy. O jaką kolejność chodzi?

---

Po wpisaniu w pola edycyjne w html skrypt ten tworzy liste. Pod inputali robią się dwie listy, jedna numerowana i nienumerowana. Nienumerowana może być tak jak, nie ma znaczenia kolejnosc dodawania skladników. Natomiast w liscie numerowanej musi byc zachowana kolejnosc. Np. Krok pierwszy zrob to i tamto, krok drugi zrob teraz to. A w obecje sytuacji kazdy nowo dodany wpis wskakuje na gore listy. W rezultacie mam Instrukcje wykonania danej czynnosci tylko od ostaniego kroku do pierwszego, wiec nie logicznie. Ponizej jeszcze kod HTML

<p>Wpisz potrzebne składniki <span class="small">(np. 2 jajka, proszę podawać składniki pojedynczo)</span></p>
						<input type="text" id="dodaj_skladnik"  class="form-control"><p></p>
						<input type="button" class="btn" value="Dodaj" onclick="lista(1)"/>
							
						<p>Podaj sposób wykonania <span class="small">(krok po kroku)</span></p>
						<textarea class="form-control" id="dodaj_wykonanie"></textarea><p></p>
						<input type="button" class="btn" value="Dodaj" onclick="lista(2)"/>

 

Answer 1

Na razie może zostaw w spokoju tablice. Na ten moment wystarczy zamienić wszystkie

.innerHTML =
na
.innerHTML +=

Comments

no nie dokońca pomogło, kolejnosc zostaje zachowana, ale duplikuje teraz wpisy :( jak dodaje drugi wpis, to jako trzeci wskakuje drugi raz pierwszy, a jak dodam czwarty to poprzednie 3 wpis itd.

---

+= dodaje kod do już istniejącego. Gdy tworzysz nowy element listy, niepotrzebnie dodajesz do niego poprzedni kod

zamień
"<li>"+dodaj_skladnik+skladniki+"</li>";
na
"<li>"+dodaj_skladnik+"</li>";

analogicznie w drugiej liście

---

Działa :) już wiem dlaczego jesteś Szeryfem ;) dziękuję Tobie bardzo za pomoc.

---

ja bym się jednak zastanowił czy nie lepiej trzymać dane w tablicy i na ich podstawie stworzyć elementy DOM... ja jestem przeciwnikiem takiego tworzenia elementów i innerHTML, wg mnie lepsze jest wyraźne oddzielenie danych od ich prezentacji... zbiór danych nie powinien mieć świadomości o tym, w jaki sposób zostaje prezentowany userowi. Jeśli elementów jest więcej to można też owinąć je w documentFragment aby nie odświeżać DOM po dodaniu każdego elementu.

---

w pełni się z Tobą zgadzam, ale ja dopiero jestem na samym początku nauki. Od samego początku nauki staram się nabierać prawilnych nawyków i te klejenie html też mnie kłuje w oczy, ale jeszcze nie potrafie zrobic lepiej :(

---

ale ja nie neguję tego, że zaczynasz naukę :) Sam kiedyś zaczynałem i tak robiłem, ale masz gotowy projekt, gdzie może warto poćwiczyć inne formy i lepiej poznać JS :) zainteresuj się np. createElement, appendChild itp. Popczytaj generalnie o tworzeniu elementów DOM w JS, chyba na kursjs.pl było to całkiem spoko opisane.

---

Dzieki za poradę. Zajrzę tam na pewno. Póki co właśnie wczoraj do mnie dotarła książka, Nieoficjalny podręcznik i zaczynam lekturę ;)

---

Tomek Sochacki ależ ja się zastanowiłem. W tym fragmencie praktycznie nie ma żadnej dobrej linijki kodu - zarówno w HTML jak i JS. Sam sposób myślenia, dzielenia kodu na reużywalne komponenty jest niepoprawny. Imo na tym etapie nauki, listEl.innerHTML +=  jest jak najbardziej poprawnym podejściem.