有效的 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 文件时，它会按预期工作。

a/the 原版 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。

在html区域添加<script>就可以了

<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"。

Answer 2

那是因为你在定义html之前需要先定义脚本或者直接把你要运行的js代码放在onClick()方法里面。

选项 1：https://jsfiddle.net/mo5pro4a/5/ 选项 2：https://jsfiddle.net/mo5pro4a/9/

Answer 3

这是因为您的 JavaScript 加载的时间。如果您将 fiddle 中的负载类型更改为 No wrap - in <head>（请参阅 this example），它将起作用。

它也适用于 Whosebug 上的一个片段：

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

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

为避免此问题，请务必在运行任何 JavaScript 之前添加您的 <script> 标记或指定任何代码，例如 onclick 属性。

Answer 4

发生这种情况是因为 onclick 在 script 之前被读取，并且当时无法找到 colorChange 函数。

这是不使用内联 HTML 事件属性的另一个原因（请参阅 here 了解大量其他属性）。更改代码以遵循标准并将 JavaScript 与 HTML.

分开

将所有这些代码放在 window 事件处理程序中，该事件处理程序在 DOM 内容加载后运行，例如：

// When the document has been fully parsed...
window.addEventListener("DOMContentLoaded", function(){

    // Register the event handler via the DOM standard:
    document.querySelector("button").addEventListener("click", colorChange);

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

});

    <p id="text">some text</p>
    <button type="button">red</button>

或者，将此代码放入一个 <script> 元素中，该元素刚好放在结束 <body> 标记（</body>）或

之前

<body>
<p id="text">some text</p>
<button type="button">red</button>

<script>
// Register the event handler via the DOM standard:
document.querySelector("button").addEventListener("click", colorChange);

function colorChange() {
 document.getElementById('text').style.color = "red";
}
</script>
</body>

无论如何，不应使用内联 HTML 事件属性。

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

Valid Javascript snippet not working on codepen or jsfiddle?

html

javascript

jsfiddle

codepen