使用Javascript更改元素ID

Question

我正在尝试将ID“字符”更改为“ 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）是一个很好的参考。 这是有关Web，其标准和当前浏览器兼容性的Wiki风格的百科全书。 如果查看有关innerHTML的页面，则会发现以下内容：

Element.innerHTML属性设置或获取描述元素后代的HTML语法。

这意味着，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属性本身的用途。

其目的是在链接（使用片段标识符），脚本或样式（使用CSS）时标识元素。

id的目的是唯一地标识元素。 您可能会想：“这就是我在做什么”。 否。您正在使用ID表示是否已选择元素。 错了 根据您的目标，我会说：只需将所选元素存储在变量中即可。 然后，每当您需要对选定的元素进行操作时，它都在该变量中。 如果您需要该元素的特定样式，则可以为其设置一个类。 但是，id根本不是这个意思-实际上，放置元素后，id并不意味着要更改。