• 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'

Fiszki IT
Fiszki IT
0 głosów
141 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,260 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 argeento VIP (109,140 p.)

Wystarczy jeden listener na rodzicu. Kluczem jest event delegation

Podobne pytania

0 głosów
1 odpowiedź 1,810 wizyt
pytanie zadane 5 lipca 2016 w JavaScript przez n0s1gnal Użytkownik (700 p.)
0 głosów
2 odpowiedzi 127 wizyt
pytanie zadane 5 września 2016 w JavaScript przez ad375 Nowicjusz (160 p.)
0 głosów
2 odpowiedzi 767 wizyt
Porady nie od parady
Możesz ukryć, zamknąć lub zmodyfikować swoje pytanie, za pomocą przycisków znajdujących się pod nim. Nie krępuj się poprawić pochopnie opublikowanego pytania czy zamknąć go po uzyskaniu satysfakcjonującej odpowiedzi. Umożliwi to zachowanie porządku na forum.Przyciski pytania

84,758 zapytań

133,559 odpowiedzi

295,986 komentarzy

56,012 pasjonatów

Motyw:

Akcja Pajacyk

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

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

...