Стилизованный инпут файл не срабатывает после первого нажатия на него

Question

Пытаюсь сделать стилизованный инпут файл, чтобы при нажатии его лэйбл менялся на название приложенного файла. Однако после первого нажатия, второй раз нажать уже не получается. Подскажите, пожалуйста, в чем проблема?

function ready() {
    const inputFile = document.querySelector('.reg-box_file');
    const labelFile = document.querySelector('.screen-label');
    const labelValue = labelFile.textContent
    inputFile.addEventListener('change', function() {
        let fileName = this.files[0].name
        if (fileName) {
            labelFile.textContent = fileName
            labelFile.classList.add('screen-label__active') 
        } else {
            labelFile.innerHTML = labelValue
        }
    })
}

document.addEventListener('DOMContentLoaded', ready)

html:

<div class="screen-container">
       <label class="screen-label" for="screen-file">
              <input
              class="reg-box reg-box_file"
              id="screen-file"
              type="file"
              />
         Прикрепить скриншот</label>
</div>

Answer 1

Надо инпут убрать из тега label. Пример:

<div class="screen-container">
       <label class="screen-label" for="screen-file">
         Прикрепить скриншот</label>
         <input class="reg-box reg-box_file"
         id="screen-file" type="file"/>
</div>

Answer 2

Можно убрать инпут из label, а можно обернуть текст в какой-нибудь span и работать с ним:

function ready() {
    const DEFAULT_FILE_NAME = 'Файл не выбран';

    const inputFile = document.querySelector('.reg-box_file');
    const labelFile = document.querySelector('.screen-label');
    let fileName = labelFile.querySelector('.file-name');
    fileName.textContent = DEFAULT_FILE_NAME
    
    inputFile.addEventListener('change', function() {
        fileName.textContent = DEFAULT_FILE_NAME
        
        if (this.files[0]) {
            fileName.textContent = this.files[0].name
            labelFile.classList.add('screen-label__active') 
        }
    })
}

document.addEventListener('DOMContentLoaded', ready)

input[type="file"] {
  width: 118px
}

<div class="screen-container">
       <label class="screen-label" for="screen-file">
              <input
              class="reg-box reg-box_file"
              id="screen-file"
              type="file"
              />
         <span class="file-name"></span></label>
</div>

Тут на самом деле всё зависит от того, хочется ли, чтобы инпут реагировал при клике на label или нет. Хочется ли, чтобы вся строка была "активной" или только определённая часть

БЛОГ НА HUSL

Стилизованный инпут файл не срабатывает после первого нажатия на него

Ответы (2 шт):