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

Złapanie zawartości diva z atrybutem 'class'

VPS Starter Arubacloud
0 głosów
284 wizyt
pytanie zadane 25 maja 2017 w JavaScript przez ProfesorPerry Nowicjusz (140 p.)

Po pierwsze, witam wszystkich forumowiczów. Po dość jednak krótkim czasowo zaangażowaniu w rozwijanie swoich umiejętności webmasterskich, czas powoli zasięgać rady bardziej doświadczonych w tej branży osób. Wydaje mi się, że im wcześniej sięgnę po inne źródło niż tylko książki, tym lepiej. Dlatego staram się bazować nie tylko na podręcznikach do programowania ale też korzystam z kursów Pana Zelenta. Myślę, że udzielając się na forum, wejdzie mi bardziej w krew jeszcze jedna ważna metoda nauki: czyli nauka na błędach. Książka jednak nie potrafi sprawdzić napisanego przez kogoś kodu i dopasować wyjaśnień pod konkretny błąd. Bo to tylko teoria napisana od deski do deski. Dobra, przechodzę do sedna tego wątku:

Mam napisany w HTML i wystylizowany już kalendarz w przeglądarce. Teraz chciałbym umożliwić jakąś interakcję w tym kalendarzem za pomocą JavaScript. Problem dotyczy dni miesiąca. Każdy z tych dni jest umieszczony w div o klasie "dayOfMonth". Po kliknięciu na któryś z tych dni, chciałbym aby w innym divie wyświetlał się ten dzień oraz do tego nazwa miesiąca i rok. Czyli dodatkowe info. No i wydaje mi się, że najlepiej uchwycić zawartość div'a, który zawiera interesujący nas numerek dnia a potem stworzyć warunek, który podmieni zawartość div'a wyświetlającego dodatkowe informacje o tym dniu. Tutaj już mam problem, bo nie wiem jak zapisać do zmiennej zawartość div'a z numerkiem dnia. No i nie wiem czy użyć id czy class, bo w końcu chciałbym na podstawie każdego osobnego dnia podmienić zawartość w div z dodatkowym info o dniu. Zamieszczam kod html z tagami script oraz CSS: 

 

<!DOCTYPE html>
<html lang="pl">
<head>
	<title>Kalendarz</title>
	<meta charset="utf-8"/>
	<link rel="stylesheet" href="style.css" />
	<link href="https://fonts.googleapis.com/css?family=Montserrat&amp;subset=latin-ext" rel="stylesheet">
	<script>
		function zmienDzien(){
			var day = document.getElementsByClassName('dayOfMonth').value;
			alert(day);
		}
	</script>
</head>
<body>
	<div id="container">
		<div id="current">
			1 Maja 2017
		</div>
		<div id="content">
			<div id="week">
				<div class="day">Pon</div>
				<div class="day">Wt</div>
				<div class="day">Sr</div>
				<div class="day">Czw</div>
				<div class="day">Pt</div>
				<div class="day">Sob</div>
				<div class="day">Nd</div>
				<div style="clear:both;"></div>
			</div>
			<div id="days">
				<div class="dayOfMonth">1</div>
				<div class="dayOfMonth">2</div>
				<div class="dayOfMonth">3</div>
				<div class="dayOfMonth">4</div>
				<div class="dayOfMonth">5</div>
				<div class="dayOfMonth">6</div>
				<div class="dayOfMonth">7</div>
				<div style="clear: both;"></div>
				<div class="dayOfMonth">8</div>
				<div class="dayOfMonth">9</div>
				<div class="dayOfMonth">10</div>
				<div class="dayOfMonth">11</div>
				<div class="dayOfMonth">12</div>
				<div class="dayOfMonth">13</div>
				<div class="dayOfMonth">14</div>
				<div style="clear: both;"></div>
				<div class="dayOfMonth">15</div>
				<div class="dayOfMonth">16</div>
				<div class="dayOfMonth">17</div>
				<div class="dayOfMonth">18</div>
				<div class="dayOfMonth">19</div>
				<div class="dayOfMonth">20</div>
				<div class="dayOfMonth">21</div>
				<div style="clear: both;"></div>
				<div class="dayOfMonth">22</div>
				<div class="dayOfMonth">23</div>
				<div class="dayOfMonth">24</div>
				<div class="dayOfMonth">25</div>
				<div class="dayOfMonth">26</div>
				<div class="dayOfMonth">27</div>
				<div class="dayOfMonth">28</div>
				<div style="clear: both;"></div>
				<div class="dayOfMonth">29</div>
				<div class="dayOfMonth">30</div>
				<div class="dayOfMonth">31</div>
				<div class="dayOfMonth">1</div>
				<div class="dayOfMonth">2</div>
				<div class="dayOfMonth">3</div>
				<div class="dayOfMonth">4</div>
			</div>
		</div>
	</div>
	<script>zmienDzien();</script>
</body>
</html>

 

 

body
{
	background-image: url(images/weather.png);
	font-family: 'Montserrat', sans-serif;
}

#container
{
	margin-left: auto;
	margin-right: auto;
	margin-top: 50px;
	background-color: #ffffb3;
	width: 500px;
	height: 530px;
	border: solid 1px #eecc99;
	border-radius: 20px;
}

#current
{
	text-align: center;
	line-height: 30px;
	letter-spacing: 2px;
	margin-left: auto;
	margin-right: auto;
	margin-top: 20px;
	width: 400px;
	height: 30px;
	padding: 5px;
	border: solid 1px #eecc99;
	border-radius: 10px;
}

#content
{
	margin-left: auto;
	margin-right: auto;
	margin-top: 20px;
	width: 400px;
	height: 400px;
	padding: 5px;
	border: solid 1px #eecc99;
	border-radius: 10px;
}

#week
{
	text-align: center;
}

.day
{
	width: 50px;
	height: 50px;
	float: left;
	margin-top: 30px;
	margin-left: 7px;
	text-align: center;
	color: #ff5c33;
}

.dayOfMonth
{
	width: 50px;
	height: 50px;
	float: left;
	margin-top: 5px;
	margin-left: 7px;
	text-align: center;
	line-height: 50px;
}

.dayOfMonth:hover
{
	background-color: #dddda2;
	cursor: pointer;
}

 

1 odpowiedź

0 głosów
odpowiedź 25 maja 2017 przez Przemek Zembrzuski Gaduła (3,240 p.)
witam,

żeby coś takiego zadziałało to trzeba do każdego diva który będzie klikalny dodać event listener który wykona callbacka i podmieni wartość drugiego diva
1
komentarz 25 maja 2017 przez niezalogowany

Wystarczy jeden listener na rodzicu. Kluczem jest event delegation

Podobne pytania

0 głosów
1 odpowiedź 2,418 wizyt
pytanie zadane 5 lipca 2016 w JavaScript przez n0s1gnal Użytkownik (700 p.)
0 głosów
2 odpowiedzi 179 wizyt
pytanie zadane 5 września 2016 w JavaScript przez ad375 Nowicjusz (160 p.)
0 głosów
2 odpowiedzi 1,520 wizyt

92,453 zapytań

141,262 odpowiedzi

319,087 komentarzy

61,854 pasjonatów

Motyw:

Akcja Pajacyk

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

Oto polecana książka warta uwagi.
Pełną listę książek znajdziesz tutaj.

Akademia Sekuraka

Akademia Sekuraka 2024 zapewnia dostęp do minimum 15 szkoleń online z bezpieczeństwa IT oraz dostęp także do materiałów z edycji Sekurak Academy z roku 2023!

Przy zakupie możecie skorzystać z kodu: pasja-akademia - użyjcie go w koszyku, a uzyskacie rabat -30% na bilety w wersji "Standard"! Więcej informacji na temat akademii 2024 znajdziecie tutaj. Dziękujemy ekipie Sekuraka za taką fajną zniżkę dla wszystkich Pasjonatów!

Akademia Sekuraka

Niedawno wystartował dodruk tej świetnej, rozchwytywanej książki (około 940 stron). Mamy dla Was kod: pasja (wpiszcie go w koszyku), dzięki któremu otrzymujemy 10% zniżki - dziękujemy zaprzyjaźnionej ekipie Sekuraka za taki bonus dla Pasjonatów! Książka to pierwszy tom z serii o ITsec, który łagodnie wprowadzi w świat bezpieczeństwa IT każdą osobę - warto, polecamy!

...