• Najnowsze pytania
  • Bez odpowiedzi
  • Zadaj pytanie
  • Kategorie
  • Tagi
  • Zdobyte punkty
  • Ekipa ninja
  • IRC
  • FAQ
  • Regulamin
  • Książki warte uwagi

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

Aruba Cloud PRO i VPS, Openstack, VMWare, MS Hyper-V
0 głosów
518 wizyt
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ź

0 głosów
odpowiedź 15 stycznia 2019 przez mitelak Pasjonat (23,470 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)

Podobne pytania

0 głosów
1 odpowiedź 668 wizyt
0 głosów
1 odpowiedź 902 wizyt
pytanie zadane 24 sierpnia 2018 w C i C++ przez omen Nowicjusz (160 p.)
0 głosów
1 odpowiedź 178 wizyt

91,291 zapytań

139,959 odpowiedzi

315,208 komentarzy

60,740 pasjonatów

Motyw:

Akcja Pajacyk

Pajacyk od wielu lat dożywia dzieci. Pomóż klikając w zielony brzuszek na stronie. Dziękujemy! ♡

Sklep oferujący ćwiczenia JavaScript, PHP, rozmowy rekrutacyjne dla programistów i inne materiały

Oto dwie polecane książki warte uwagi. Pełną listę znajdziesz tutaj.

...