主页 / 问题 / 1564447
Accepted
Bemfes
Asked:2024-02-02 17:51:52 +0000 UTC2024-02-02 17:51:52 +0000 UTC

样式输入文件在第一次单击后不起作用

  • 772

我正在尝试制作一个风格化的输入文件，以便在单击时，其标签更改为附加文件的名称。然而，按下第一次后，就无法再按下第二次了。请告诉我，有什么问题吗？

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>
javascript

2 个回答

  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>
    • 0

相关问题