document.getElementById()对于多个id不能正常工作

Question

我有一个document.getElementById()的问题。基本上我有不同的形式，每个都有不同的id，我使用一点Javascript来替换一些类，并在上传后添加动态文件名。

这应该很容易，但我不知道为什么即使id是完全唯一的，我得到一个奇怪的行为:无论我提交文件的形式是什么，javascript将应用更改总是在第一个。

function spinnerLoad(){
document.getElementById('file-name[[${id}]]').textContent = this.files[0].name;

document.getElementById('spinner[[${id}]]').classList.replace('fas', 'spinner-border');
document.getElementById('spinner[[${id}]]').classList.replace('fa-file-upload', 'spinner-border-sm');
document.getElementById('uploadForm[[${id}]]').submit()
}

/*I'm using Bootstrap for my styling rules*/

/*${id} variable is server-side and it's there to make unique each form, I'm using Thymeleaf template engine*/
<form th:id="'uploadForm'+${id}" method="post" enctype="multipart/form-data" th:action="@{/upload/{id} (id=${id})}">
<label for="file-upload" class="btn btn-outline-success">
<span th:id="'spinner'+${id}" class="fas fa-file-upload"></span> <b>Upload file:</b> <i th:id="'file-name'+${id}">No file selected</i>
</label>
<input id="file-upload" type="file" name="multipartFile"  accept="application/pdf" style="display: none" th:onchange="spinnerLoad()"/>
</form>

我在谷歌上搜索了这个问题，但我没有找到我的问题的具体答案，所以这就是为什么我在这里打扰你。

我希望有人能帮我解决这个问题，谢谢。

Answer 1

您会得到大量重复的代码，这可能很难维护。这里，我将事件侦听器放置在所有按钮的父<div>上。然后我需要测试它是一个按钮。也不需要每个按钮都有id。

实际上，如果您只是替换一个类名，您甚至不需要做测试(if())，因为replace()只会在旧值存在时进行替换。这应该没问题:

buttons.addEventListener('click', e => {
e.target.classList.replace('btn-success', 'btn-danger');
});

下面是完整的测试示例:

var buttons = document.getElementById('buttons');
buttons.addEventListener('click', e => {
if (e.target.nodeName == 'BUTTON') {
e.target.classList.replace('btn-success', 'btn-danger');
}
});

.btn-success {
background-color: green;
}
.btn-danger {
background-color: red;
}

<div id="buttons">
<button class="btn-success">Button 1</button>
<button class="btn-success">Button 2</button>
<button class="btn-success">Button 3</button>
</div>

Answer 2

您缺少使此工作的css，但您的示例是正常的。但是，通过将按钮作为一个类而不是单独处理，可以更简单地完成。

var btns = document.getElementsByClassName("btn");
var addDanger = function(){
this.classList.replace('btn-success', 'btn-danger')
};
for (var i = 0; i < btns.length; i++) {
btns[i].addEventListener('click', addDanger, false);
};

.btn {height:20px; width: 50px;}
.btn-success {background-color:green}
.btn-danger {background-color:red}

<button id="btn1" class="btn btn-success"></button>
<button id="btn2" class="btn btn-success"></button>
<button id="btn3" class="btn btn-success"></button>