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

为什么这个香草Javascript在Codepen / JSfiddle中不起作用的原因是什么？没有涉及的库（jQuery，React等）。我的第一个想法是在JSFiddle，有一个属性，你可以在负载类型的设置中设置。我将其设置为onLoad但仍然无法正常工作。 Codepen看起来并不能控制它。

的jsfiddle： https://jsfiddle.net/mo5pro4a/1/

Codepen： 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齿轮并将负载类型更改为小提琴中的“head”或“body”。

Answer 2

这是因为您的JavaScript加载时间。如果您将小提琴中的载入类型更改为No wrap - in <head>（请参阅this example），它将有效。

它也适用于StackOverflow上的代码片段：

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 3

那是因为您需要在定义html之前定义脚本，或者只是将要运行的js代码放在onClick()方法中。

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

Answer 4

这种情况正在发生，因为在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事件属性。

有效的Javascript片段无法在codepen或jsfiddle上运行？

4 个答案: