有效的Javascript代码段不能在codepen或jsfiddle上工作？

我有一个按钮，单击它时会将文本的颜色更改为红色。有效的Javascript代码段不能在codepen或jsfiddle上工作？

以下一些基本的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

UPDATE：Codepen实际上看起来是OK - 这个问题主要是现在的jsfiddle。

来源

2017-05-08 kawnah

getElement ** b ** yId https://jsfiddle.net/mo5pro4a/2/ –

您可以从您的JS代码中为您的按钮添加一个侦听器来解决它或在脚本标记内添加代码身体。 – Gerardo

因为您在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”。

来源

2017-05-08 19:59:21

另外，如果您单击JavaScript齿轮，则可以将负载类型更改为“head”或“body”。 – imtheman

这实际上并不是一个好方法，因为它意味着您可以在解析整个DOM之前扫描DOM元素。如果要在HTML之前放置脚本，则脚本的内容（利用DOM元素）应位于DOMContentLoaded事件处理程序的内部。更好的是，不要使用内联事件属性。 –

@ScottMarcus当然。这只是一个简单的例子。 –

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

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

来源

2017-05-08 20:03:07

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

它也可以在一个片段在这里，在计算器上：

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

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

为了避免这个问题，请务必在运行任何JavaScript或指定任何代码之前添加<script>标签，例如作为onclick属性。

来源

2017-05-08 20:03:48 freginold

我认为这是最好的答案。 – imtheman

@imtheman倡导使用内联HTML事件属性（这是导致此问题的原因）绝不是最好的答案。 –

@ScottMarcus我不主张内联HTML事件属性;只是使用OP提供的内容，并告诉他为什么它不起作用。 – freginold

发生这种情况的原因是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() { 
 
    \t 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() { 
 
\t document.getElementById('text').style.color = "red"; 
 
} 
 
</script> 
 
</body>

无论哪种方式，不应使用内联HTML事件属性。

来源

2017-05-08 20:04:07

有效的Javascript代码段不能在codepen或jsfiddle上工作？

回答

相关问题