Dwa te same zdjęcia (URL to samo) - inne div'y - błąd

pytanie zadane 17 kwietnia 2021 w JavaScript przez Nabuchadonozor Gaduła (3,120 p.)
zamknięte 17 kwietnia 2021 przez Nabuchadonozor

Witam witam,

otóż napotkałem się z ciekawym błędem. Plan był taki - losowanie kostek w JS. W folderze mam 6 różnych stron (obrazki [.jpg]) kostek. Użyłem 2 razy funkcji losującej Math.floor(Math.random() * 6), której wartości wyciągnąłem do dwóch różnych zmiennych. Przy podmianie ścieżki dwóch elementów img, jeśli firstNumber oraz secondNumber nie są sobie równe, wszystko śmiga. Jednakże gdy są sobie równe - klapa. Tylko jeden obrazek się pokazuje, a chcę, żeby obydwa te same nawet się wyświetlały. Szperałem w necie, ale chyba nietrafnie ten problem nazywałem, bo nie wiem do końca jak to krótko opisać...

(dopowiem, choć pewnie wiecie, że funkcja appendChild() nie zmienia nic)

Liczę na podpowiedź i z góry dzięki!

index.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <link rel="stylesheet" href="style.css">
    <title>Document</title>
</head>
<body>
    <div id="firstDice"><img id="firstDiceA" src=""></div>
    <div id="secondDice"><img id="secondDiceA" src=""></div>

    <script src="js/loadPhotos.js"></script>
    <script src="js/drawDices.js"></script>
</body>
</html>

drawDices.js

var firstNumber = Math.floor(Math.random() * 6);
var secondNumber = Math.floor(Math.random() * 6);
    
for(var i=0; i<2; i++){
    document.getElementById('firstDiceA').src = "img/kosc_" + firstNumber + ".jpg";
    document.getElementById('secondDiceA').src = "img/kosc_" + secondNumber + ".jpg";
}

komentarz zamknięcia: złe nazwy plików .jpg

1 odpowiedź

odpowiedź 17 kwietnia 2021 przez Comandeer Guru (601,110 p.)
wybrane 17 kwietnia 2021 przez Nabuchadonozor

Najlepsza

Hm, powinno działać. Taki szybki trick, który przychodzi mi do głowy, a który może zadziałać: dodaj na końcu adresu obrazka aktualny znacznik czasu:

document.getElementById('firstDiceA').src = "img/kosc_" + firstNumber + ".jpg?" + Date.now();

Btw czemu to jest w pętli?

komentarz 17 kwietnia 2021 przez Nabuchadonozor Gaduła (3,120 p.)

Ogólnie sprawa wygląda tak, znalazłem błąd, odpaliłem te firstNumber i secondNumber w console.log() i okazało się, że zapomniałem do funkcji losującej dodać na końcu 1, ponieważ nazwy obrazków mam od 1 do 6, a losowało mi liczbę od 0 do 5.

Ta pętla została po wcześniejszych jakichś próbach rozwiązania problemu i zapomniałem totalnie o niej...

Ale totalnie mi głowę rozwaliłeś tym ".jpg?" i Date.now()... Gdyby nie to, to bym nie wpadł na ten błąd, dzięki wielkie!