Javascript-форум (https://javascript.ru/forum/)
-   Элементы интерфейса (https://javascript.ru/forum/dom-window/)
-   -   Проблема с document.getElementsByClassName.... (https://javascript.ru/forum/dom-window/59795-problema-s-document-getelementsbyclassname.html)

Kweli 27.11.2015 02:08
Проблема с document.getElementsByClassName....
 
Всем здравствуйте, подскажите мне пожалуйста, в чем моя ошибка.
Цель следующая: Необходимо чтобы при нажатии на картинку появлялся блок (в данном случае там только текст).

Ошибку я допустил именно в строке document.getElementsByClassName... так как если вставить вывод чего-либо после это записи, он просто не выводится. Много разной информации прочитал по этому поводу, но либо я дурак, либо лыжи не едут... Надеюсь на вашу помощь..:) 
<head>
		<meta charset="utf-8">
		<title>Текст</title>
		<link href="style-create.css" rel="stylesheet">
		<script src="../game/skr.js"></script>
	</head>
<body>
		<div id="classes">
			<input id="archer" type="image" src="../game/img/archer.jpg" onClick="Archer()">
			<input id="mag" type="image" src="../game/img/mag.jpg" onClick="Mag()">
		</div>
		
		<div id="content">
			<div class="archer">
				<p>текст текст текст</p>
			</div>
		</div>
	</body>


'use strict';
function Archer() { 
	document.body.style.background = "red";
	document.getElementsByClassName('archer').style.display = "block";
};
function Mag() { 
	document.body.style.background = "white";
};

Код:
.archer {
        display: none;
}

рони 27.11.2015 06:56
Цитата:
Сообщение от Kweli
getElementsByClassName
[0] индекс нужен

Kweli 27.11.2015 11:59
Цитата:
Сообщение от рони (Сообщение 397815)
[0] индекс нужен
Большое спасибо, если не сложно ответьте на несколько вопросов.
Индекс обозначает номер элемента?
Если да, то как выбрать все элементы с таким классом?
Обязательно ли нужен индекс при ...ClassName... ?

рони 27.11.2015 12:14
Цитата:
Сообщение от Kweli
Обязательно ли нужен индекс
да
Цитата:
Сообщение от Kweli
Индекс обозначает номер элемента?
да
Цитата:
Сообщение от Kweli
выбрать все элементы с таким классом?
 
[].forEach.call( document.querySelectorAll('.archer'), function(el) {
       el.style.width = "10%";
       el.classList.add('mini');
});

Leon-on12 27.11.2015 12:43
Важно обращать внимание на название метода.
getElementById И
getElementsByTagName

В виду неиспользования библиотек, все элементы с классом я выбираю счётчиком. Не знаю правильно ли это? Но получается что-то такое:

var elem = document.getElementsByClassName("class")
for (var i=0;i<elem.length;i++)
		elem[i]//...

рони 27.11.2015 12:45
Цитата:
Сообщение от Leon-on12
правильно ли это?
да
только не
Цитата:
Сообщение от Leon-on12
document.getElementsByClassName("serBlock")[i]//...
а elem[0], зачем искать то что уже найдено

Leon-on12 27.11.2015 13:00
рони,

Да, точно. Всё пытаюсь приучить себя назначать на элементы переменные. Но иногда забываю.
Вот сейчас загуглил. Всё время казалось что querySelectorAll это jquerевская штука.
Вопрос к тебе лично как к профессионалу, Рони. Стоит ли кидаться менять все getElementы сроно на querySelectorAll?

Rise 27.11.2015 13:11
Цитата:
Сообщение от Leon-on12 (Сообщение 397837)
Стоит ли кидаться менять все getElementы сроно на querySelectorAll?
Они не одно и тоже у них есть существенное различие getElementы возвращают "живые" коллекции, а querySelectorAll нет. Если "живость" необходима тогда менять не стоит...

рони 27.11.2015 13:18
Leon-on12,
document.getElementById() это нет смысла менять, остальное если работает, то лучше не трогать :) иногда
getElements - удобно тем что всегда содержит актуальные данные , querySelectorAll делает снимок на момент поиска.
из-за актуальности getElements если что-то меняют то идут с конца коллекции(это так на всякий)i=elem.length - 1


Часовой пояс GMT +3, время: 14:53.