有效的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上工作？

回答

相關問題