wyświetlanie elementów tablicy na tej samej stronie po kliknięciu w div ?

pytanie zadane 12 stycznia 2019 w HTML i CSS przez Dariusz Hozer Użytkownik (920 p.)

<!Doctype html>
<html>
<body>
 
<div class="pon" onclick="poniedzialek()">PON</div>
<div class="wt" onclick="wtorek()">WT</div>
<div class="sr" onclick="sroda()">SR</div>
<div class="czw" onclick="czwartek()">CZW</div>
<div class="pt" onclick="piatek()">PT</div>
<div class="wyswietla"></div>

</body>
</html>

.pon,.wt,.sr,.czw,.pt{

width:5%;
height: 10vh;
border:1px solid black;
line-height: 10vh;
text-align: center;
margin-bottom:4vh;

}
.wyswietla{

width:5%;
height:10vh;
border:solid 2px black;


}





function poniedzialek(){

  var pon =['Stefan<br>','Bogusława<br>','Wiesława<br>','Janina<br>'];

document.write( pon[0] );
document.write( pon[1] );
document.write( pon[2] );
document.write( pon[3] );
};


function wtorek(){

var pon =['Stefan<br>','Bogusława<br>','Jerzy<br>','Andrzej<br>'];
document.write( pon[0] );
document.write( pon[1] );
document.write( pon[2] );
document.write( pon[3] );

};



function sroda(){

var pon =['Stefan<br>','Bogusława<br>','Wiesława<br>','Janina<br>'];
document.write( pon[0] );
document.write( pon[1] );
document.write( pon[2] );
document.write( pon[3] );
}



function czwartek(){

var pon =['Stefan<br>','Bogusława<br>','Jerzy<br>','Andrzej<br>'];
document.write( pon[0] );
document.write( pon[1] );
document.write( pon[2] );
document.write( pon[3] );
}


function piatek(){

var pon =['Janina<br>','Karbownik<br>','Dudek<br>','Andrzej<br>'];
document.write( pon[0] );
document.write( pon[1] );
document.write( pon[2] );
document.write( pon[3] );
}

Jak zrobić by na tej samej stronie wyświetlało mi elementy tablicy w pustym divie "wyswietl".

1 odpowiedź

odpowiedź 15 stycznia 2019 przez mitelak Pasjonat (23,330 p.)

https://codepen.io/mitelak/pen/REvXaE

1. https://kornel.ski/pl/onclick zamiast onClick to eventListener

2. Skoro w te divy chcemy kliknąć, żeby wywołać jakąś akcje to powinny być buttonami

3. Głównym problemem w Twoim kodzie jest użycie document.write(), które modyfikuje strumień danych i w przypadku takiego użycia jak Twoje nadpisuje cały dokument tym co wpiszesz we write(). Jednym z rozwiązań jest użycia innerHTML

Żeby kod był bardziej uniwersalny i nie było potrzebne pisanie funkcji dla każdego dnia z osobna utworzyłem nasłuchiwanie na div#dni w którym sprawdzam czy kliknięty element zawieta atrybut data-day (https://developer.mozilla.org/pl/docs/Learn/HTML/Howto/Use_data_attributes), jeżeli tak to do div.wyswietla doklejam kolejne imiona z tablicy dane (wybieram tablice według numeru wziętego z data-day)