如何侦听onchange，即使有多个元素，并将更改应用到多个元素？
如何侦听onchange，即使有多个元素，并将更改应用到多个元素？
提问于 2020-04-23 16:59:39
我有一组文件类型的输入，当只有一个输入被赋予一个文件时，我需要在多个"p“元素中显示文件名。我已经尝试过让它与数组一起工作，但当我尝试时，它也不会起作用。
HTML
<input type="file" accept=".doc" id="fileUpload1">
<input type="file" accept=".doc" id="fileUpload2">
<p class="paragraph">Select your file.</p>
<p class="paragraph">Select your file.</p>JS
document.getElementById('fileUpload1').onchange = function () {
var file = document.getElementById('fileUpload1').value;
var filename = file.substring(file.lastIndexOf("\\") + 1);
var pr = document.getElementsByClassName("paragraph");
pr.innerHTML = "Selected File: " + filename;
};回答 1
Stack Overflow用户
回答已采纳
发布于 2020-04-23 17:09:59
首先，每个元素必须有一个唯一的id。如果要引用多个元素，请使用class。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title></title>
<link rel="stylesheet" href="">
<script src="index.js"></script>
</head>
<body>
<input type="file" class="file-input" />
<input type="file" class="file-input" />
<p class="file-name">Select a file</p>
<p class="file-name">Select a file</p>
</body>
</html>window.onload = function () {
var inputs = document.querySelectorAll('.file-input');
var paragraphs = document.querySelectorAll('.file-name');
for (var i = inputs.length - 1; i >= 0; i--) {
inputs[i].addEventListener('change', displayName);
}
function displayName(e) {
var file = e.target.files[0];
if (!file) return;
for (var i = paragraphs.length - 1; i >= 0; i--) {
paragraphs[i].innerText = file.name;
}
}
}页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/61392815
复制相关文章
相似问题
如何禁用多个元素的onChange，然后更改，然后在jQuery中启用onChange
如何更改多个元素？
如何对多个输入元素使用onchange函数？
在多个元素上应用onchange事件
jquery循环遍历多个元素，同时更改多个元素？
添加站长 进交流群
领取专属 10元无门槛券
AI混元助手 在线答疑
关注 腾讯云开发者公众号
洞察 腾讯核心技术
剖析业界实践案例
腾讯云开发者
