Console.log zwaraca wartość undefined {Java-script}

Question

Mam problem ponieważ losuję się tylko jedna wartość translate[1] 

function rotate() {
	const rotate = document.querySelector(".cube");
	const translate = [rotate.classList.add("animation"), rotate.classList.add("animation-1")];
	translate[Math.floor(Math.random() * 2)];
	console.log(translate[Math.floor(Math.random() * 2)]);
}

 

Answer 1

Rozwinięcie komentarza stąd:

function rotate() {
    const rotate = document.querySelector(".cube");
    const translate = ["animation",  "animation-1", "animation-2", "animation-3"]; // tablica z samymi nazwami klas
    const randomClassName = translate[Math.floor(Math.random() * translate.length)]; // losowanie od 0 do długości tablicy

    console.log('randomClassName:', randomClassName);

    rotate.classList.add(randomClassName); // dodanie wylosowanej klasy jeden raz
}

 

Answer 2

Dlatego żę Math.random()  Zwraca pseudolosową, zmiennoprzecinkową liczbę z przedziału [0, 1)

(Math.random() * 2)]); // to jest 0*2  tylko

Dodatkowo jest to przedział otwarty więc zawsze będzie 1 wartość 
https://developer.mozilla.org/pl/docs/Web/JavaScript/Reference/Global_Objects/Math/random
Zwrócona będzie losowa liczba pomnożona przez 2 z przedziału [0,1] więc to będzie liczba z przedziały 0-2.. przyczym robisz floor... podłogę więc to nigdy nie będzie liczba 2, bo zaokrąglenie leci w dól do 1.
Maksymalna wartość na przedział otwarty to 1.999999 i to w wyniku i tak zaokrągli do 1

Comments

teraz jak dodałem kollejne 3 rekordy 

const translate = [rotate.classList.add("animation"), rotate.classList.add("animation-1"), rotate.classList.add("animation-2"), rotate.classList.add("animation-3")];

a potem  

	translate[Math.floor(Math.random() * 5)];
	console.log(translate[Math.floor(Math.random() * 5)]);

to i tak dodaje mi wysztkie animation do section cube

---

element.classList.add nic nie zwraca, tylko dodaje do element wskazaną klasę css.

Answer 3

Sprawdź różnicę między: Math.round  a Math.floor  

<button onclick="document.querySelector('#round').textContent += (Math.round(Math.random()*2));">Round to 2</button>
<output id="round"></output>
<br /><br />
<button onclick="document.querySelector('#floor').textContent += (Math.floor(Math.random()*2));">Floor to 2</button>
<output id="floor"></output>

Answer 4

po dodaniu 

function rotate() {
	const rotate = document.querySelector(".cube");
	const translate = [rotate.classList.add("animation"), rotate.classList.add("animation-1"), rotate.classList.add("animation-2"), rotate.classList.add("animation-3")];
	translate[Math.floor(Math.random() * 5)];
	console.log(translate[Math.floor(Math.random() * 5)]);
}

kolejny rekordów dodaje mi je wszytkie do klasy cube a nie tylko jeden wyolosowany 

Comments

Chyba chodzi Tobie o

const rotate = document.createElement('DIV');

rotate.classList.add("animation"); 
rotate.classList.add("animation-1"); 
rotate.classList.add("animation-2"); 
rotate.classList.add("animation-3");


const translate = [
  rotate.classList.item(0), 
  rotate.classList.item(1), 
  rotate.classList.item(2), 
  rotate.classList.item(3)
];

console.log(translate);

translate[Math.floor(Math.random() * translate.length)];
console.log(translate[Math.floor(Math.random() * translate.length)]);

 

---

@chrystian, coś tu namieszałeś. Metoda classList.add zwraca undefined. Wykonujesz tą metodę kilka razy, więc dodajesz do elementu o klasie cube kilka klas na raz. Potem losujesz liczbę i używasz jej jako indeks do odczytania elementu z tablicy translate, ale ta tablica ma same wartości undefined, co widzisz w konsoli.

Powinieneś do tablicy translate wstawić same nazwy klas, czyli: animation, animation-1, animation-2, animation-3. Na tej tablicy stringów wylosować indeks. Wylosowany indeks użyć do odczytania stringa z tablicy. I dopiero użyć tego stringa jako parametr metody classList.add.