Guzik do wyświetlania obrazka do randomowego obrazka

0

Uczę się na pewny przedmiot i przydałaby mi się taka wspomagająca prosta apka dzięki której mógłbym weryfikować swoją wiedzę.

Odpalam sobie index.html i wyświetlić się ma "z bazy danych" losowy obrazek. (to już mam zrobione).
Tylko chciałbym jeszcze do tego mieć guzik gdzieś nad obrazkiem "Pokaż odpowiedź", który po kliknięciu pokazałby dodatkowe, przypisane zdjęcie nad wyświetlonym obrazkiem. Można założyć, że to przypisane zdjęcie zawsze nazywa się tak samo jak wylosowany obrazek tylko np. ma dodany prefix answer_ do nazwy pliku .jpg.

Baza danych zdjęć jest mała, więc im brzydszy kod tym wręcz bardziej wskazany, bo jest dla mnie czytelniejszy. Bez żadnych pętli i innych cudów technologii.

W skrócie dla obrazka zad 1.jpg po kliknięciu button powinien pojawić się nad wyświetlonym obrazkiem zad 1.jpg dodatkowy obrazek przypisany do niego tj. answer_zad1.jpg. Później robię F5 stronki, skrypt losuje nowy obrazek i znów mogę kliknąć button i tak w kółko...

Mam taki kod:

<html>
<script type="text/javascript">
function randomImg1() {
    var myImages1 = new Array();
    myImages1[1] = "Zad 1.jpg";
    myImages1[2] = "Zad 2.jpg";
    myImages1[3] = "Zad 3.jpg";
    var rnd = Math.floor(Math.random() * myImages1.length);
    if (rnd == 0) {
            rnd = 1;
    }
    document.write('<img class="who" src="' + myImages1[rnd] + '">');
}

function showAnswer() {
	document.write(<'img src="' + 'answer_' + myImages1[rnd] + '">');
}
</script>

<body>
<button onClick="showAnswer();">Show answer</button>
<script> randomImg1(); </script>
</body>
</html>

Czy mógłby ktoś poprawić ten guzik aby dodawał przypisane obrazek nad wyświetlony losowy obrazek po kliknięciu buttona?
Mówiąc wprost: nie umiem nic z JS'a, a zależy mi na czasie, dlatego w ogóle to pytanie i dlatego sam tego nie ogarnąłem. Absolutnie nie zależy mi na jakichkolwiek dobrych praktykach (i tak ich nie zauważę, i na nic się nie przydadzą, a to już końcowa faza tego niesamowicie złożonego projektu).

Byłbym bardzo wdzięczny.

1

Trzy uwagi:

1) W funkcji showAnswer w document.write masz znaczek < przed apostrofem. Powinno to wyglądać tak: document.write('<img src="' + 'answer_' + myImages1[rnd] + '">');

2) W funkcji showAnswer() odwołujesz się do tablicy myImages1, która nie jest globalna, gdyż została zadeklarowana wewnątrz funkcji randomImg1. Wynieś deklarację tablicy przed funkcję randomImg1.

3) Podobnie sprawa się ma ze zmienną rnd - powołujesz ją do życia wewnątrz jednej funkcji, ale odwołujesz się także w innej. Nie jest to zbyt dobry pomysł ;)

1

<html>
<script type="text/javascript">
var myImages1 = new Array();
    myImages1[1] = "zad1.jpg";
    myImages1[2] = "zad2.jpg";
    myImages1[3] = "zad3.jpg";
//var rnd = 8;

function randomImg1() {
   
 rnd = Math.floor(Math.random() * myImages1.length);
    if (rnd == 0) {
            rnd = 1;
    }
    document.write('<img class="who" src="' + myImages1[rnd] + '">');
}
 
function showAnswer() {
    document.write('<img src="' + 'answer_' + myImages1[rnd] + '">');
}
</script>
 
<body>
<button onClick="showAnswer();">Show answer</button>
<script> randomImg1(); </script>
</body>
</html>

Trochę na szybko poprawiłem Twój kod. Nie jest to ładnie ani porządnie napisane, ale wydaje się, że działa. Wprawdzie nie chciało mi się bawić w podpinanie prawdziwych obrazków, ale po wciśnięciu przycisku z odpowiedzią w przeglądarce pojawia się <img src="answer_zad3.jpg">, więc zakładam, że powinno być OK :)

1 użytkowników online, w tym zalogowanych: 0, gości: 1