如何使用JS获取具有相同id的元素的值

Posted 2021-04-16

我想显示第一个输入框的值，当我点击第一个删除链接并显示第二个输入框的值当我点击第二个删除链接时使用相同的ID，但它总是发送第一个删除链接的值。

function delChat() {
   var id = document.getElementById('delmsg').value;
   alert(id);
}

<a href="#" onclick="delChat()">Delete?</a>
<input type="hidden" value="1352" id="delmsg" >
<br />
<a href="#" onclick="delChat()">Delete?</a>
<input type="hidden" value="1350" id="delmsg" >

答案

您不能对两个不同的元素使用相同的id。页面上的每个元素都应具有唯一ID。

但是如果你不能改变id，那么你应该这样得到属性：

function delChat(el) {
   console.log(el.getAttribute('value') + " clicked");
   var xmlhttp = new XMLHttpRequest();
   xmlhttp.open('GET', 'delete.php?id='+el.getAttribute('value'), true);
   xmlhttp.send();
}

<a href="#" id="delmsglink" onclick="delChat(this)" value="1352">Delete?</a>
<br />
<a href="#" id="delmsglink" onclick="delChat(this)" value="1350">Delete?</a>

另一答案

ids必须是独一无二的。最好的选择是使用类并将事件侦听器附加到每个元素。您可以在事件侦听器调用的函数中使用this指向被单击的元素。此外，value不是a的有效属性，因此请使用数据属性：data-value - 可以通过元素的dataset对象访问数据属性的值。

function delChat() {
  var id = this.dataset.value;
  console.log(id);
}

const buttons = document.querySelectorAll('.del');
buttons.forEach(button => button.addEventListener('click', delChat, false));

<a href="#" class="del" data-value="1352">Delete?</a>
<br />
<a href="#" class="del" data-value="1350">Delete?</a>

另一答案

对于这些情况，可以停止使用id，仅仅传递在html中使用保留字this和js中被单击作为函数参数的元素，以获取可以使用的值属性getAttribute ('value')

function delChat(el) {
  let id = el.getAttribute('value');
  console.log(id);
  
}

<a href="#" onclick="delChat(this)" value="1352">Delete?</a>
<br />
<a href="#" onclick="delChat(this)" value="1350">Delete?</a>

以上是关于如何使用JS获取具有相同id的元素的值的主要内容，如果未能解决你的问题，请参考以下文章

js根据相似的id获取多个元素的值

获取input相同名字的元素的值

如何在javascript中使用两个具有相同ID的文本框获取asp.net用户控件的值

JS如何获取指定对象下面的表单元素的值,见代码!

Hibernate CriteriaBuilder - 如何匹配具有相同字段的所有元素，其中 id 相同

如何获取具有相同名称的所有元素值