javascript - 有效的 Javascript 片段不适用于 codepen 或 jsfiddle？

Question

我有一个按钮，单击它会将文本颜色更改为红色。

下面是一些基本的 JS:

function colorChange() {
 document.getElementById('text').style.color = "red";
}

和 HTML:

<p id="text">some text</p>
<button type="button" onclick="colorChange()">red</button>

不适用于 JSfiddle 或 Codepen。但是 - 当我制作一个相同的本地 HTML 文件时，它会按预期工作。

为什么这个 vanilla Javascript 在 Codepen/JSfiddle 中不起作用的原因是什么？不涉及任何库(jQuery、React 等)。我的第一个直接想法是在 JSFiddle 中，您可以在加载类型的设置中设置一个属性。我将其设置为 onLoad 但仍然无效。 Codepen 看起来并不提供对此的控制。

JSFiddle: https://jsfiddle.net/mo5pro4a/1/

代码笔: https://codepen.io/anon/pen/YVYZXj

更新:Codepen 实际上看起来没问题 - 现在问题主要出在 jsfiddle 上。

Answer 1

因为你在html中使用了onclick attr，但是在这个标签后面插入了js。

如果你加上 <script> 就可以了在 html 区域。

<script>
function colorChange() {
    document.getElementById('text').style.color = "red";
}
</script>
<p id="text">some text</p>
<button type="button" onclick="colorChange()">red</button>

谢谢 imtheman。另一种方法是单击 JavaScript 齿轮并在 fiddle 中将加载类型更改为“head”或“body”。