问有效的Javascript片段不工作在代码或jsfiddle上？
EN

Stack Overflow用户

提问于 2017-05-08 11:55:59

回答 4查看 1.8K关注 0票数 2

我有一个按钮，当点击它时，将文本的颜色更改为红色。

以下是一些基本的联合材料：

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中，您可以在load类型的设置中设置一个属性。我将其设置为onLoad，但仍然没有工作。Codepen看起来并不能提供对此的控制。

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

Codepen：https://codepen.io/anon/pen/YVYZXj

更新: Codepen实际上看起来还可以--现在的问题主要是与jsfiddle有关。

javascript

html

jsfiddle

codepen

CDN&音视频通信出海专场

提供游戏出海、社交娱乐等方案，助力企业抢占出海市场

回答 4

Stack Overflow用户

回答已采纳

发布于 2017-05-08 11:59:21

因为您在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齿轮，并改变负载类型为“头”或“身体”在小提琴。

票数 1

Stack Overflow用户

发布于 2017-05-08 12:03:48

这是因为您的JavaScript何时加载。如果您将小提琴中的加载类型更改为No wrap - in <head> (请参阅这个例子)，它将工作。

它还可以在StackOverflow上的一个片段中工作：

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

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

要避免此问题，请确保在运行任何<script>或指定任何代码(如onclick属性)之前添加您的onclick标记。

票数 1

Stack Overflow用户

发布于 2017-05-08 12:04:07

之所以会发生这种情况，是因为onclick是在script之前读取的，并且在那个时候找不到colorChange函数。

这也是不使用内联HTML属性的另一个原因(参见这里中的其他属性)。更改代码以遵循标准，并将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>