js 显示相同id的按钮
在JavaScript中，每个元素的 id 应该是唯一的，因为 id 是用来标识页面上的特定元素的。如果页面上有多个元素使用了相同的 id，那么通过 document.getElementById() 方法只能获取到第一个匹配的元素。
如果你想要显示具有相同 id 的所有按钮，你可以使用 document.querySelectorAll() 方法，它接受一个CSS选择器作为参数，并返回所有匹配该选择器的元素的NodeList。
以下是一个示例代码，展示如何显示所有具有相同 class（而不是 id）的按钮：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<button class="myButton">Button 1</button>
<button class="myButton">Button 2</button>
<button class="myButton">Button 3</button>
<script>
// 使用类选择器来获取所有按钮
var buttons = document.querySelectorAll('.myButton');
// 遍历所有按钮并显示它们
buttons.forEach(function(button) {
console.log(button.textContent); // 在控制台中显示按钮文本
// 或者在页面上显示按钮
document.body.appendChild(button.cloneNode(true)); // 克隆并添加到页面中
});
</script>
</body>
</html>如果你确实遇到了具有相同 id 的元素，并且想要处理这些元素，你应该考虑以下解决方案：
- 更改HTML代码：确保每个元素都有一个唯一的
id。 - 使用类选择器：如果需要对一组元素进行相同的操作，使用
class而不是id。 - 修改JavaScript代码：使用
document.querySelectorAll()来选择所有具有相同类名的元素。
如果你遇到了因为使用相同 id 导致的问题，那么最好的解决方法是修改HTML，确保每个元素的 id 是唯一的。如果你无法修改HTML，那么你可能需要重新考虑你的JavaScript代码逻辑，以便它能够正确处理这种情况。
相关·内容
我想插入一个按钮，该按钮将在javascript测验完成后出现。我希望按钮具有与我的HTML文件中使用的按钮相同的样式-样式来自CSS工作表。我对JS并不是很有经验。测验JS代码结束： function endQuiz() { $('#question-image').remove();text(Math.r
浏览 21提问于2019-02-20得票数 0
回答已采纳
我有一个带有段落和联系人表单的HTML。当浏览器禁用JavaScript时，我想要显示联系人表单和文本段落。
否则，我想显示contact按钮，用户可以单击该按钮，表单就会显示出来。
浏览 1提问于2012-02-09得票数 0
我已经创建了一个带有3个按钮(隐藏、接受和拒绝)的div。当我使用display:block显示它时，它可以正确地显示。但是如果我用相同的id创建了一个新的小部件，同样的小部件也会显示出来，但是没有按钮。> <button id</e
浏览 0提问于2021-03-11得票数 0
1回答
因此，我有一个脚本，它将从页面上的表中获取链接(“x”是登录用户页面上的链接).所以我试着用布洛克帮我写另一个剧本的弹出循环.链接被正确地添加到'linksToOpen‘数组中(或者在我添加按钮、侦听器和'openLinksInSequence’函数之前).一切似乎都很好而且我没有收到错误信息但我的纽扣坏了！type="button">'
+ 'Check Accomplishments</butto
浏览 5提问于2013-11-15得票数 0
回答已采纳
我创建了一个网页，其中有几个输入框和一个提交按钮。<form action="" method="post" name="password">if (passwrd1document.getElementById("response").innerHTML="<font color=&#
浏览 0提问于2009-07-08得票数 0
回答已采纳
1回答
我对web开发非常陌生，我正在尝试创建一系列按钮，当单击这些按钮时，会触发特定于该按钮的覆盖。下面的代码创建了一个按钮和覆盖效果。 -ms-transform: translate(-50%,-50%);</style><body>
<div id="overlay" onclick="off
浏览 4提问于2022-01-13得票数 0
回答已采纳
5回答
我尝试使用displayItem函数显示数组JSON中的下一项，但是在单击按钮之后，表单重新加载了第一个值(arrayResponse[0])。我应该怎么做才能显示下一项？
浏览 2提问于2017-06-26得票数 0
我有这段代码来让Facebook分享，但这并不能读取我的og meta标签。把它放到Facebook调试器中，它读起来很好。id=<%# Eval("id") %>" data-type="box_count"><asp:Image ID="Image3" runat="server" Width="32px
浏览 1提问于2014-01-21得票数 1
可能重复：
所有操作都很好，但我想删除“相似”按钮旁边的消息，该按钮读取
的名字和名字都是这样的。该div的类是“connect_connect_cell”。我试着设置显示:没有在那个div上，但它不工作。有什么想法吗？
浏览 3提问于2011-09-25得票数 1
我有一个问题，在firefox中我的页面上的like按钮不起作用，但在所有其他浏览器中都能起作用。不要介意它的布局，它可能看起来很凌乱。
浏览 2提问于2012-08-29得票数 1
如何将内置的Devise edit_user_registration视图移动到一个模式，以便当用户单击页面上的设置链接时，会显示一个模式，而不是路由到视图的Rails。我正在使用bootstrap，并希望使用他们的代码，但我不确定在rails中将模式视图的内容放在什么位置？<a class="btn" data-toggle="modal" href=&quo
浏览 2提问于2012-05-05得票数 0
回答已采纳
这是我的html模板： <h3> <a href ="{% url 'profile' p.user.id %}"> {{p.user}}: </a> </h3，它才会显示editsec div并隐藏post div。document.querySelector('.posts').style.display = "none"
浏览 6提问于2020-09-06得票数 2
回答已采纳
/myappurl" data-send="false" data-width="450" data-show-faces="false"></div>就像example...See的wordpress.org一样，页面的左下角。最好的，亚历克斯
浏览 3提问于2013-06-11得票数 0
回答已采纳
我们正在使用Facebook JavaScript API 2.0版本(即sdk.js)在我们的网站中显示Facebook 喜好按钮。如果用户登录到Facebook并访问我们的页面，那么“喜欢”按钮将正确显示。 if (d.getElementById(
浏览 1提问于2014-08-04得票数 3
6回答
多次提交Ajax请求
、、、、
我正在修改对我的表格的一些验证。验证是可行的，问题是当没有出现验证错误时，表单提交的次数与用户提交的次数一样多。就像要求堆在一堆里一样。表单有一个提交按钮，它调用我的ajax函数create_new_stuff
<input id='submitButton' onclick='create_new_stuff()' name='submit
浏览 3提问于2014-07-14得票数 0
回答已采纳
这是我的MySQL表：
$stmt = $db->prepare("INSERT INTO likes (user_id,post_id) VALUES (?,?)");
$stmt->execute(array($_SESSION['user'],$_POST[&#x
浏览 5提问于2011-04-02得票数 0
回答已采纳
我试图使用jQuery来隐藏类no_js的内容，并使用类js显示内容。我将此用于窗体上的按钮；当启用Javascript时，我会显示将onclick绑定到Javascript函数的onclick“按钮”，而当Javascript被禁用时，页面将显示(默认情况下) type我想使用隐藏/显示或切换，因为元素可能有不同的显示类型(inline、inline-
浏览 8提问于2011-08-08得票数 0
回答已采纳
这是我的代码为main_activity.i要实现在屏幕上可见的每个按钮上的广告，当点击间隙广告应该显示。但它只在btn_button.Kindly上显示广告，指导我如何解决这个问题。InitializationStatus initializationStatus) {
浏览 7提问于2020-01-25得票数 1
2回答
导出按钮未出现在数据表中
、、、、
我使用的是jQuery DataTables 1.10，我的所有代码都运行良好。//code.jquery.com/jquery-1.11.3.min.js
https://cdn.datatables.net/1.10.9/js/jquery.dataTables.min.js/bpampuch/pdfmake/0.1.18/build/vfs_fonts.js</e
浏览 0提问于2015-09-11得票数 3
2回答
我正在从外部html文件加载的内容。page1.html和page2.html。除了图片和文字之外，一切都是一样的。但与关闭按钮有冲突。它只关闭page1.html。下面是我的代码示例 dividid = $(this).parents('div').attr('id');
divid = $('#' +dividid).parents('div').attr(&#
浏览 0提问于2013-03-14得票数 0
回答已采纳
扫码
添加站长 进交流群
领取专属 10元无门槛券
手把手带您无忧上云
相关资讯
热门标签
云服务器
ICP备案
腾讯会议
云直播
对象存储活动推荐
腾讯云开发者
