Obrazek w divie i jego wyświetlenie za pomocą JS

Question

Cześć ;D
Chciałabym  wyświetlić obrazek,który ma być "miniaturką w divie" za pomocą javyscript ( tzn klikam w ikonke i otwiera się obrazek np w wyświetlaczu -który został zrobiony za pomocą div-ów i css) 
Kod html:

 <div id="dwojka" onclick=" pobierzobrazek(dwojka)">
<img src="dwojka.png" />
 </div>

Kod JS:

var wszystko="";
function pobierzliczbe(x)
{



    document.getElementById("wyswietlacz").innerHTML=x;

wszystko+=x;
dwieliczby();

}

function dwieliczby()
{
    document.getElementById("wyswietlacz").innerHTML=eval(wszystko);    
}


function restart()
{
     wszystko="";
     document.getElementById("wyswietlacz").innerHTML=wszystko;
}
function pobierzobrazek(dwojka)        // głównie chodzi o tą część
{
         document.getElementsByTagName('img'); 
        document.getElementById("wyswietlacz").innerHTML=dwojka;
}

 

Answer 1

Nie za bardzo rozumiem co chcesz zrobić.

Ale:

1. Poniższa instrukcja zwraca Ci kolekcję elementów, a nie pojedynczy element 

https://developer.mozilla.org/en-US/docs/Web/API/Element/getElementsByTagName

document.getElementsByTagName('img');

Aby dostać jeden element z kolekcji musisz podać jego numer (w tym przypadku akurat będzie to [0], bo jest to jedyny tag <img>). Podobnie jest z poleceniami document.querySelectorAll() oraz document.getElementsByClassName() - one zwracają Ci wiele elementów, do których pojedynczo możesz dostać się podając ich numer w nawiasach kwadratowych [] (niczym elementy tablicy). Aby wypisać lub zmienić coś we wszystkich elementach pobranych za pomocą powyższych poleceń, możesz użyć do tego pętli.

Druga sprawa, jeśli używasz już document.get... to albo od razu coś zmieniaj, czyli np. document.getElementsByTagName('img')[0].style.width = '150px'; albo przypisz to do jakiejś zmiennej, bo tak jak jest teraz, to ta metoda nic nie robi (możesz sobie ją w konsoli wpisać i Ci pokaże dany element, ale nic w związku z nim nie wykonasz).

2. Co to ma robić?

onclick=" pobierzobrazek(dwojka)"

Pytam o podanie jako parametr "dwojka", czym jest ta dwojka?

3. Tak ogólnie - czy Ty chcesz w innym divie wyświetlić zawartość diva #dwojka (czyli zdjęcia)? Bo według Twojego pliku HTML obrazek już jest w divie o ID #dwojka. Jeśli to było zamierzone, to po co chcesz go wyświetlić w innym divie?

Możesz zrobić tak, że wstawiasz w HTML obrazek tam gdzie chcesz, ale jako niewidoczny (w CSS ustawiasz 'display: none'), a w JS na kliknięcie ustawiasz mu 'display = "block";' i wtedy obrazek pojawi się tam gdzie chcesz. Do tego polecam użycie EventListenera

 https://developer.mozilla.org/en-US/docs/Web/API/EventTarget/addEventListener