Javascript-форум - Проблема с document.getElementsByClassName....

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)

Проблема с 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;

}

Цитата:

Сообщение от Kweli

getElementsByClassName

[0] индекс нужен

Цитата:

Сообщение от рони (Сообщение 397815)

[0] индекс нужен

Большое спасибо, если не сложно ответьте на несколько вопросов.
Индекс обозначает номер элемента?
Если да, то как выбрать все элементы с таким классом?
Обязательно ли нужен индекс при ...ClassName... ?

Цитата:

Сообщение от Kweli

Обязательно ли нужен индекс

да

Цитата:

Сообщение от Kweli

Индекс обозначает номер элемента?

да

Цитата:

Сообщение от Kweli

выбрать все элементы с таким классом?

[].forEach.call( document.querySelectorAll('.archer'), function(el) {
       el.style.width = "10%";
       el.classList.add('mini');
});

Важно обращать внимание на название метода.
getElementById И
getElementsByTagName

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

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

Цитата:

Сообщение от Leon-on12

правильно ли это?

да
только не

Цитата:

Сообщение от Leon-on12

document.getElementsByClassName("serBlock")[i]//...

а elem[0], зачем искать то что уже найдено

рони,

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

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