Как перебрать массив getElementsByClassName?

Question

[Сергей Примиренков]

Как правильно проверить, во все ли поля формы введены значения, и если какие-то пустые, поменять им рамку на красную с помощью перебора массива, возвращенного getElementsByClassName?

Answer 1

[Dark Hole]

let els = document.getElementsByClassName('...');
Array.from(els).forEach((el) => if(!el.value) el.style.border = '1px solid red');
// Или
for(let i = 0; i < els.length; ++i) if(!el.value) els[i].style.border = '1px solid red')

Comments

[Сергей Примиренков]

Ну это просто перебор, а куда добавить проверку if (!el.value)?

[Dark Hole]

Сергей Примиренков: а да, невниматьлено вопрос прочитал. Исправил

Answer 2

[gleendo]

let elements = document.getElementsByClassName(`имя класса`);

for (let i = 0; i < elements.length; i += 1) {
	if (elements[i] пустой) {
		// Поменять цвет рамки
	}
}

Answer 3

[Stalker_RED]

Array.prototype.forEach.call(document.querySelectorAll('.myClass'), el => {
  if (!el.value) {
    el.classList.add('error')
  }
})

https://jsfiddle.net/kLkdvs2f/

UPD: современные браузеры позволяют вызывать метод forEach у NodeList

document.querySelectorAll('.myClass').forEach(el => {
  if (!el.value) {
    el.classList.add('error')
  }
})

Comments

[gleendo]

Stalker_RED Array.prototype.forEach.call(document.querySelectorAll('.myClass'), el => {

[Stalker_RED]

iamevg_: если я вместо Aarray.prototype пишу [] где-то в мире умирает котенок? А вместо !!x нужно Boolean(x) писать, да?

[gleendo]

Stalker_RED: ну желательно бы не убивать котят. Но все же, создавать просто так объекты не лучшая идея. Быстрее и эффективнее будет использовать методы из прототипа.