javascript - 使用 Javascript 更改元素 ID

Question

我正在尝试将 id“character”更改为“characterSelected”

var character = document.getElementById('character');
var characterSelected = document.getElementById('characterSelected');

function klik() {
    character.innerHTML = characterSelected;
}

character.addEventListener('click', klik);

这是我到目前为止所拥有的，但它似乎不起作用。我想仅使用 Javascript 来完成此操作，而不使用 jQuery。

谢谢

Answer 1

你尝试了一些方法，但没有成功。现在是时候查找您错误使用的标准属性和函数了。如果猜测不起作用，请始终寻找可靠的文档。

Mozilla 开发者网络 (MDN) 是一个很好的引用。这是一本关于网络、网络标准和当前浏览器兼容性的维基风格的百科全书。如果您查看有关 innerHTML 的页面，您会发现以下内容:

The Element.innerHTML property sets or gets the HTML syntax describing the element's descendants.

这意味着innerHTML属性用于替换标签的内容，就像您在其中编写HTML一样。不是你想要的。

您想要的是更改元素的 id。如果您搜索元素 id，您将找到 Element.id页。多么实用，有一个例子:

var idStr = elt.id; // Get the id.
elt.id = idStr; // Set the id

但是，这并不能解决您的问题。您看，您在尝试使用 getElementById 函数时猜错了。该函数查看页面并立即找到具有该 id 的元素。如果您一开始没有任何具有 characterSelected id 的元素，那么您设置的此变量在其余时间将为 null。当具有该 id 的元素放置在页面中时，变量不会神奇地更新。

最后，您错过了 id attribute 的目的本身。

Its purpose is to identify the element when linking (using a fragment identifier), scripting, or styling (with CSS).

id 的目的是唯一地标识一个元素。你可能会想:“这就是我正在做的事情”。不。您使用 id 来表示是否选择了某个元素。这是错误的。根据您的目标，我会说:只需将所选元素存储在变量中即可。然后，每当您需要对所选元素执行某些操作时，它就在该变量中。如果您需要该元素的特定样式，那么您可以为其设置一个类。但 id 根本不是为此目的 - 事实上，一旦放置一个元素，id 就不会改变。