如何在 JavaScript 中使用具有多个 ID 的 document.getElementById？答案

【问题标题】：How to Use document.getElementById with Multiple IDs in JavaScript?如何在 JavaScript 中使用具有多个 ID 的 document.getElementById？
【发布时间】：2022-09-23 14:36:16
【问题描述】：

我想在单击后更改两个按钮的代码，当我使用单个 id 时它可以正常工作，但是当我使用多个 id 时它不起作用我仍在学习 js，所以任何想法都会有所帮助

const btn = document.getElementById(\'copy_btn\',\'down_btn\');
copy_btn.addEventListener(\'click\', function handleClick() {
  btn.innerHTML = `<iconify-icon icon=\"akar-icons:copy\"></iconify-icon> Copied`;
});
down_btn.addEventListener(\'click\', function handleClick() {
  btn.innerHTML = `<iconify-icon icon=\"ri:file-download-line\"></iconify-icon> Downloading`;
});

<link href=\"https://cdn.jsdelivr.net/npm/bootstrap@5.2.0/dist/css/bootstrap.min.css\" rel=\"stylesheet\" 
        integrity=\"sha384-gH2yIJqKdNHPEq0n4Mqa/HGKIhSkIHeL5AyhkYV8i59U5AR6csBvApHHNl/vI1Bx\" crossorigin=\"anonymous\">
    <!-- iconify cdn -->
    <script src=\"https://code.iconify.design/iconify-icon/1.0.0/iconify-icon.min.js\"></script>
<button type=\"button\" class=\"btn btn-dark\" id=\"down_btn\"><iconify-icon icon=\"ri:file-download-line\"></iconify-icon> Download</button>
          <button type=\"button\" class=\"btn btn-dark\"   onclick=\"copyEvent();\" id=\"copy_btn\"><iconify-icon icon=\"akar-icons:copy\"></iconify-icon> Copy </button>

您不能将其与多个 ID 一起使用。试试getElementsByClassName。
const copy_btn = document.getElementById(\'copy_btn\'), down_btn = document.getElementById(\'down_btn\');

标签： javascript html

【解决方案1】：

这是一种方法，定义一个函数addClickHandlers，它接受一个元素数组（每个元素都有一个id、图标和文本），然后为每个元素添加点击处理程序。

const addClickHandlers = (ids) => {
  ids.forEach(({ id, icon, text }) => {
    const element = document.getElementById(id);
    element.addEventListener("click", function handleClick() {
      element.innerHTML = `<iconify-icon icon="${icon}"></iconify-icon> ${text}`;
    });
  });
};

addClickHandlers([
  { id: "copy_btn", icon: "akar-icons:copy", text: "Copied" },
  { id: "down_btn", icon: "ri:file-download-line", text: "Downloading" },
]);

&lt;link href="https://cdn.jsdelivr.net/npm/bootstrap@5.2.0/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-gH2yIJqKdNHPEq0n4Mqa/HGKIhSkIHeL5AyhkYV8i59U5AR6csBvApHHNl/vI1Bx" crossorigin="anonymous"&gt;&lt;script src="https://code.iconify.design/iconify-icon/1.0.0/iconify-icon.min.js"&gt;&lt;/script&gt;&lt;button type="button" class="btn btn-dark" id="down_btn"&gt;&lt;iconify-icon icon="ri:file-download-line"&gt;&lt;/iconify-icon&gt; Download&lt;/button&gt;&lt;button type="button" class="btn btn-dark" onclick="copyEvent();" id="copy_btn"&gt;&lt;iconify-icon icon="akar-icons:copy"&gt;&lt;/iconify-icon&gt; Copy &lt;/button&gt;

【讨论】：

【解决方案2】：

提示的名称为getElementById“元素”，意思是单数。您可以使用getElementsByClassName 或querySelectorAll。

但如果他们有不同的 ID，那么你必须这样做两次。

const downBtn = document.getElementById("down_btn");

const copyBtn = document.getElementById("copy_btn");

【讨论】：

【解决方案3】：

document.getElementById() 一次只支持一个名称，并且只返回一个节点而不是节点数组。您有几种不同的选择：

您可以实现自己的函数，该函数接受多个 id 并返回多个元素。
您可以使用document.querySelectorAll()，它允许您在CSS 选择器字符串中指定多个ID。
您可以在所有这些节点上放置一个通用的类名，并使用带有单个类名的document.getElementsByClassName()。

试试这样：

document.getElementById("copy_btn down_btn");

【讨论】：