有效的 Javascript 片段在 codepen 或 jsfiddle 上不起作用？
Posted
技术标签:
【中文标题】有效的 Javascript 片段在 codepen 或 jsfiddle 上不起作用？【英文标题】：Valid Javascript snippet not working on codepen or jsfiddle? 【发布时间】：2017-05-08 19:55:59 【问题描述】：我有一个按钮，点击它会将文本颜色变为红色。
下面的一些基本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 上。
【问题讨论】：
getElementbyId jsfiddle.net/mo5pro4a/2 您可以从您的 JS 代码中为您的按钮添加一个监听器来解决它，或者在正文末尾的脚本标签中添加代码。 【参考方案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>
感谢伊姆西曼。另一种方法是点击 JavaScript 齿轮，在 fiddle 中将负载类型更改为“head”或“body”。
【讨论】：
另外，如果您点击 JavaScript 齿轮，您可以将负载类型更改为“head”或“body”。 但是，简单的例子不应该是如何不去做的例子。 我明白了。我猜 JSFiddle 的构建方式与 Codepen 不同。 堆栈溢出答案应始终努力遵循标准和最佳实践。您可以只说明 JSFiddle 的问题所在，然后继续解释为什么应该避免这种形式的编码。请记住，Stack Overflow 也是未来用户的知识库。 @ScottMarcus 我完全理解关注点分离的整个概念——我只是好奇为什么这在 JSFiddle 中没有按预期工作。我认为它在 HTML 之前运行脚本。在 JSFiddle 中设置事件侦听器无论如何都不会起作用，因为现在我知道脚本在该平台中的 HTML 之后加载。【参考方案2】：这是因为您的 JavaScript 是在何时加载的。如果您将小提琴中的负载类型更改为No wrap - in <head>（请参阅this example），它将起作用。
它也适用于此处的 sn-p，在 *** 上：
function colorChange()
document.getElementById('text').style.color = "red";
<p id="text">some text</p>
<button type="button" onclick="colorChange();">red</button>为避免此问题，请务必在运行任何 JavaScript 或指定任何代码（例如 onclick 属性）之前添加您的 <script> 标记。
【讨论】：
我认为这确实是最好的答案。 @imtheman 提倡使用内联 HTML 事件属性（这是造成此问题的原因）绝不是最佳答案。 @ScottMarcus 我不提倡内联 HTML 事件属性；只是使用 OP 提供的内容并向他展示为什么它不起作用。 我只是想解释一下，使用 OP 使用的东西并不是 Stack Overflow 上的一个好的答案。回答问题然后对存在某种缺陷的代码提供更正的答案。【参考方案3】：发生这种情况是因为 onclick 在 script 之前被读取，并且当时无法找到 colorChange 函数。
这是不使用内联 HTML 事件属性的另一个原因（请参阅 here 了解更多其他属性）。更改代码以遵循标准并将 JavaScript 与 HTML 分开。
将所有这些代码放在加载 DOM 内容后运行的 window 事件处理程序中，例如：
// 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 事件属性。
【讨论】：
【参考方案4】：那是因为你需要在定义html之前定义脚本或者只是把你要运行的js代码放在onClick()方法里面。
选项 1：https://jsfiddle.net/mo5pro4a/5/ 选项 2：https://jsfiddle.net/mo5pro4a/9/
【讨论】：
以上是关于有效的 Javascript 片段在 codepen 或 jsfiddle 上不起作用？的主要内容，如果未能解决你的问题，请参考以下文章
在应用程序配置文件中找不到名为“x”的连接字符串......但它有效吗？