非常基本的 Javascript：更改 HTML ID答案

【问题标题】：Very Basic Javascript: Change HTML ID非常基本的 Javascript：更改 HTML ID
【发布时间】：2016-04-06 21:48:59
【问题描述】：

我似乎无法在以下位置使用它：https://jsfiddle.net/xc6htkn4/4/

<body>
  <p id="one">One</p>
  <p id="two">Two</p>
  <p id="three">Three</p>
  <p id="four">Four</p>
  <p>
    <button onclick="changeId()">Try it</button>
  </p>  
</body>

#one {
  color: red;
}

#two {
  color: blue;
}

function changeId() {
  var el = document.getElementById('one');
  el.id = 'two';
}

代码有什么问题？这似乎是正确的。我只是想在点击事件上更改 id。

谢谢！

编辑：我的设置没有在 jsfiddle 中正确设置

【问题讨论】：

How do I change the ID of a HTML element with JavaScript?的可能重复
您不能将 id 设置为 'two'，因为另一个元素已经拥有该 id。
虽然这不是最佳实践，但它似乎可以正常工作。我已将代码更新为没有欺骗 ID

标签： javascript

【解决方案1】：

你的代码很好，你只需要改变jsfiddle加载js代码的方式。点击“javascript”按钮并选择“加载类型”为“No wrap - in <body>”

工作示例：https://jsfiddle.net/xc6htkn4/5/

【讨论】：

谢谢！只是学习语言。如果我在真实网页中编写 HTML 并希望将我的 HTML 和 JS 分隔在单独的文件中，会怎样？
应该没有问题。只需在“body”或“head”标签中创建一个“script”元素，并将其链接到单独的 js 文件：''
您不应该使用 ID，因为 ID 应该只用于每个页面的一个元素。如果您希望多个元素具有相同的 CSS，请改用 class。
@PavelMorshenyuk nowrap 在 jsfiddle 中做了什么？您会将不同的选项用于什么目的？
@paul-fitzgerald 您可以在此处找到此信息：doc.jsfiddle.net/basic/… 前两个选项不会将您声明的函数添加到全局范围内。不能从内联 html 调用此类函数。