Почему JS не находит элемент?

Question

[PressOff]

Доброго времени суток!

Uncaught TypeError: Cannot set property 'innerHTML' of null
at HTMLInputElement.

Не могу понять почему JS не находит элемент label....

перегуглил даже англоязычные версии, но и там не нашёл для себя ответа...

Задача выводить название загружаемого файла вместо текущей записи в теге label.

Ниже код:

<label for="file" class="upload-label"><span>Upload</span></label>
<input type="file" name="file" id="file" class="hide inputfile"  accept="application/vnd.ms-excel" 
data-multiple-caption="{count} files selected" multiple/>

var inputs = document.querySelectorAll( '.inputfile' );
Array.prototype.forEach.call( inputs, function( input )
                             {
    var label	 = input.nextElementSibling,
        labelVal = label.innerHTML;

    input.addEventListener( 'change', function( e )
                           {
        var fileName = '';
        if( this.files && this.files.length > 1 )
            fileName = ( this.getAttribute( 'data-multiple-caption' ) || '' ).replace( '{count}', this.files.length );
        else
            fileName = e.target.value.split( '\\' ).pop();

                                            if( fileName )
        label.querySelector( 'span' ).innerHTML = fileName;
        else
            label.innerHTML = labelVal;
    });
});

.hide {
position: absolute;
    overflow: hidden;
    z-index: -1;
    width: 0.1px;
    height: 0.1px;
    opacity: 0;
}

.upload-label{
    display: inline-block;
    cursor: pointer;
    background-color: #357;
    padding: 5px 80px;
    color: white;
    border-radius: 5px;
    border: 1px solid black;
}

Answer 1

[0xD34F]

У вас в школе по английскому была честная двойка, или давали взятки ради троек? Ну, то есть - откройте словарь, и посмотрите, как переводится слово "next". Потом посмотрите в каком порядке расположены ваши элементы.

Comments

[PressOff]

Я конечно понимаю, что Вам хотелось бы видеть вопросы от Илона Маска, но к сожалению я один из тех кто учится )

Не уж то так опять всё просто?
Поменять местами инпут и лейбл?

Ради этого сейчас комп включу ))

[0xD34F]

PressOff,

Поменять местами инпут и лейбл?

Или погуглить, как получить предыдущий элемент.

Answer 2

[Дмитрий Беляев]

Про проблему с next/previous уже написали, но относительное получение элементов вообще чревато проблемами, что будете делать, если завтра верстка изменится?
label для input лучше искать так:

function getLabelForInput(input) {
  if(input.id) {
    const label = document.querySelector(`label[for="${input.id}"]`);
    if(label) { return label; }
  }
  for(let parent = input; parent = parent.parentElement;) {
    if(parent.tagName === 'LABEL') { return parent; }
  }
  return null;
}

Comments

[PressOff]

Дмитрий, вот ты написал, теперь вместо того, чтобы дальше идти буду с твоим примером разбираться))

[Дмитрий Беляев]

PressOff, label может быть связан с input двумя способами:
1. через атрибут for, содержащий id нужного input
2. через вложенность (input вложен в label)

Если у инпута нет id, то первый случай не имеет смысла, но если он есть, то можно попробовать найти label с помощью селектора по атрибуту. Если нашли - задача решена, поэтому return.
В цикле мы проходимся вверх по DOM дереву от нашего инпута, если среди родителей есть label - его и вернем, но если дошли до корня DOM дерева (из выражения parent.parentElement вернется null, который приводится к false), то логично предположить, что связанного label с нашим input просто нет.

[PressOff]

Дмитрий Беляев, однозначно лучший, огромное спасибо!

[PressOff]

Дмитрий Беляев, всё же Вас побеспокою:)

сделал инпут вложенным в лейбл, но название не подставляется...

где ошибаюсь?

<label for="file" class="upload-label">
			<input type="file" name="file" id="file" class="hide inputfile"  accept="application/vnd.ms-excel" data-multiple-caption="{count} files selected" multiple/>Upload</label>

[Дмитрий Беляев]

PressOff, увидеть бы, как изменился JS, по одному html тут не понятно

[PressOff]

Дмитрий Беляев,

вообще не изменился:
но после Вашего сообщения понял, что надо в значении функции поставить id самого импута, так?

function getLabelForInput(input) {
	if(input.id) {
		const label = document.querySelector(`label[for="${input.id}"]`);
		if(label) { return label; }
	}
	for(let parent = input; parent = parent.parentElement;) {
		if(parent.tagName === 'LABEL') { return parent; }
	}
	return null;
}

[Дмитрий Беляев]

PressOff, нет, в эту функцию передается сам input

[PressOff]

Дмитрий Беляев,

изменить функцию в Array.prototype.forEach.call( '', ___?___ )?

тогда отпадает необходимость в var inputs = document.querySelectorAll( '.inputfile' );

[Дмитрий Беляев]

PressOff, вот тут подставить: var label = getLabelForInput(input)