Podmiana zawartości diva JavaScript

Question

Mam pewnie problem związany z zamianą wewnątrz divów, chce zmienić jego zawartość po kliknięciu. Kod JS ma służyć do podmiany pytań w quizie.

JS http://wklej.org/id/3125432/

HTML http://wklej.org/hash/2841e8b41d6/

Edit

przerobiłem ten kod, podmienia tekst tylko, że robi to dla jednego powtórzenia i w konsoli wyświetla się że obiekt.p jest undefiend oraz obiekt.e, a sprawdzenie odpowiedź też niezbyt dobrze działa.

Skrypt

http://www.wklej.org/id/3135914/

Answer 1

• gdzie jest zamykający znacznik diva o id="box"?
• tak samo nie ma dla diva id="all"
• w kodzie JS nie masz takiego elementu, jak tab[2], albo tab[3] - trochę źle próbujesz ogarnąć tablice ;)

for(var i = 0; i < = tab2.length; i++) {
	document.getElementById("c").innerHTML = tab2[0];
	document.getElementById("d").innerHTML = tab2[1];
	document.getElementById("p").innerHTML = tab2[2];
	document.getElementById("t").innerHTML = tab2[3];
}

ten kod powinien być skrócony, bo za dużo powtórzeń ;)
lepiej byłoby wykorzystać w tym celu [i] by sobie pomóc, np tab2[i], gdzie po każdym wykonaniu pętli [i] zwiększałoby się o 1. Podobnie zresztą z pobieraniem elementów dałoby się zrobić, tylko do tego jeszcze trzeba wykorzystać querySelectorAll()

Tu znalazłam chyba całkiem ok quiz link. Mógłbyś sobie kod przejerzeć (nie mówię, że wszystko musisz zrozumieć) i zobaczyć, w jaki sposób łatwiej zrobić takie cuś :P

PS. specem od JS nie jestem, quizu jeszcze nie robiłam, ale tak czy inaczej w kodzie masz namieszane ;)

Answer 2

var tab2 = 
{
 ["1791","1891", "1465", "1936"],
 ["Nil","Amazonka","Missisipi","Yang Cy"];
} 

Jeśli nie kombinujesz czegoś z Destructuring Assignment z ES6, to powyższy zapis jest błędny - w taki sposób nie stworzysz literału obiektu (konsola wyrzuci SyntaxError). Zapoznaj się z metodyką tworzenia obiektów w formie literałów. Sądząc po pętli for, chciałeś raczej zrobić dwuwymiarową tablicę.

Próbując jednak dobrać się do pól tych zagnieżdżonych tablic, również popełniasz parę błędów:

 for(var i = 0; i < = tab2.length; i++) {
	document.getElementById("c").innerHTML = tab2[0];
	document.getElementById("d").innerHTML = tab2[1];
	document.getElementById("p").innerHTML = tab2[2];
	document.getElementById("t").innerHTML = tab2[3];
}

Drugim wyrażeniem wewnątrz składni pętli for jest warunek jej trwania. Gdy chcesz, aby pętla działała, dopóki X jest mniejsze lub równe Y, to musisz zapisać go w formie dwóch znaków, bez spacji: <=

Wewnątrz pętli (a proponuję zrobić dwie, gdyż zmienna tab2 jest tablicą składającą się z tablic)  prawa strona wyrażenia przypisania:

document.getElementById("c").innerHTML = tab2[0];

wyciągnie Ci pierwszy element z tablicy tab2, a więc całą zagnieżdżoną tablicę, a przecież chcesz iterować po elementach tejże tablicy - więc musisz zrobić drugą pętlę (jeśli nadal na instrukcji for, to dla spójności utwórz w niej iterator o nazwie j)

Jeszcze, co do pierwszej tablicy:

var tab1 = ["W którym roku powstała Konstytucja 3 Maja ?", "Jaka jest najdłuższa rzeka świata ?"];

, wewnątrz funkcji sp(check) korzystasz z pętli, wewnątrz której robisz (moim zdaniem - oceniając Twój zamiar) błąd:

ekran.innerHTML = tab1[i];

, ponieważ pętla wykona się 2 razy, a Ty każdorazowo przypisujesz na nowo wartość (napis) jako treść HTML. Powinieneś tutaj użyć raczej operatora przypisania addycyjnego.