Valid Javascript snippet not working on codepen or jsfiddle?

I have a button that when clicked it changes the color of text to red.

Some basic JS below:

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

and HTML:

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

Does not work on either JSfiddle or Codepen. However - when I make an identical local HTML file it works as expected.

What would be a/the reason as to why this vanilla Javascript doesn't work in Codepen/JSfiddle? There are no libraries (jQuery, React etc) involved. My first immediate thought was in JSFiddle, there is a property that you can set in settings for the load type. I set this to onLoad and still did not work. Codepen doesn't look like it offers control over this.

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

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

UPDATE: Codepen actually looks to be OK - the issue is primarily now with jsfiddle.

Answers:

Answer

Because you use onclick attr in html, but js is inserted after this tag.

It'll work fine if you add <script> in html area.

<script>
function colorChange() {
    document.getElementById('text').style.color = "red";
}
</script>
<p id="text">some text</p>
<button type="button" onclick="colorChange()">red</button>

Thanks imtheman. Another way is to click on the JavaScript gear and change the load type to "head" or "body" in fiddle.

Answer

It's because of when your JavaScript is loaded. If you change the load type in your fiddle to No wrap - in <head> (see this example) it will work.

It also works in a snippet here, on StackOverflow:

function colorChange() {
 document.getElementById('text').style.color = "red";
}
<p id="text">some text</p>
<button type="button" onclick="colorChange();">red</button>

To avoid this problem, be sure to add your <script> tag before running any JavaScript or specifying any code, such as the onclick attribute.

Answer

That's because you need to define the script before you define html or just put the js code you want to run inside the onClick() method.

Option 1 : https://jsfiddle.net/mo5pro4a/5/ Option 2 : https://jsfiddle.net/mo5pro4a/9/

Answer

This is happening because the onclick is being read before the script is and the colorChange function can't be found at that time.

This is yet another reason not to use inline HTML event attributes (see here for a slew of others). Change the code to follow standards and keep the JavaScript separate from the HTML.

Place all of this code inside a window event handler that runs after the DOM content is loaded, such as:

// 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>

Or, place this code into a <script> element that is placed just before the closing <body> tag (</body>) or

<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>

Either way, inline HTML event attributes should not be used.

Tags

Recent Questions

Top Questions

Home Tags Terms of Service Privacy Policy DMCA Contact Us

©2020 All rights reserved.