JSFiddler doesn't read javascript

Question

Have a simple function I want to write jsfiddle, but I cannot get any javascript to work. Tried in FF and Chrome with same results.

Looked at SO posts here and here but I couldn't get it to work.

Code:

<input type="button" value="5 Items" onclick="test()">
<input type="button" value="6 Items" onclick="arrayOfOandZ(6)">
<input type="button" value="7 Items" onclick="arrayOfOandZ(7)">


function test() {
    alert("TEST");
}

function arrayOfOandZ (size) {
    var arrayOFOnZ[size];
    //Fill array
    for(var x = 0; x < size; x++){
        arrayOfOnZ[x] = size % 2;
    }
    alert(arrayOFOnZ.join('\n'));
}

fiddle

It's because JavaScript written in the JavaScript panel isn't accessible to in-line event-handlers (`onclick`, `onmouseover`, etc), presumably by-design. If you use unobtrusive JavaScript (so the event-handling is defined in the JavaScript panel along with the functions those handlers call), then it works fine. — David Thomas, Mar 21 '13 at 23:22
`Uncaught SyntaxError: Unexpected token ILLEGAL`. I mistakenly voted to close the question as a duplicate, but it really should be closed as *too localized*. — Felix Kling, Mar 21 '13 at 23:27
The new fiddle you linked too has a syntax error too: `Uncaught SyntaxError: Unexpected token [ `. I recommend to [read this article](http://www.netmagazine.com/tutorials/javascript-debugging-beginners) to learn how to debug JavaScript. Arrays defined as `var arr = [];` in JavaScript. See https://developer.mozilla.org/en-US/docs/JavaScript/Guide/Predefined_Core_Objects#Array_Object. — Felix Kling, Mar 21 '13 at 23:30

rid · Accepted Answer · 2013-03-21T23:41:09.587

3

Your script (the one posted at the jsFiddle link) contains the following errors:

You're using a undefined $document value and trying to call a function (ready) on it.
You have a line that reads:
```
alert("TEST);
```
You have a line that reads:
```
var arrayOFOnZ[size];
```

Additionally, the function gets defined only after the DOM is loaded, by default. Change the dropdown on the left from "onLoad" to "No wrap - in <head>", to instruct jsFiddle to append your script directly in the <head> tag, instead of in the window.onload function.

edited Mar 21 '13 at 23:41

answered Mar 21 '13 at 23:26

rid

61,078
31
152
193

Ahh, wrong fiddle posted. I have one without that error and see the same thing (edited in question) – Soatl Mar 21 '13 at 23:30
@PepperedLemons, in the new fiddle, you still have the last syntax error that I'm mentioning. – rid Mar 21 '13 at 23:30
Still nothing. Tried to make the fiddle simple. Just an alert http://jsfiddle.net/sfJLx/9/ – Soatl Mar 21 '13 at 23:35
@PepperedLemons, this is happening because the `test()` function only gets defined *after* the DOM is loaded. Change the dropdown on the left from "onLoad" to "No wrap - in ", so that the script is appended as is, in the `` tag, instead of in a function called at the `window.onload` event. Updated answer. – rid Mar 21 '13 at 23:37
@Peppered: In your new series of fiddles, you are defining the functions in the `load` event handlers, which makes your question a duplicate of http://stackoverflow.com/q/15543456/218196. – Felix Kling Mar 21 '13 at 23:42

Nope · Answer 2 · 2013-03-21T23:42:17.813

Update your fiddle to use no wrap - in <head> or no wrap in <body> or jsFiddle will wrap the script by default into a window.onload. Which causes the elements to render first and as the onclick is rendered the script does not exists yet as it only gets added after the window is loaded, like this:

<html>

    <head>
        <meta http-equiv="content-type" content="text/html; charset=UTF-8">
        <title>- jsFiddle demo</title>
        <script type="text/javascript" src="/js/lib/dummy.js"></script>
        <link rel="stylesheet" type="text/css" href="/css/result-light.css">
        <style type="text/css">
</style>
        <script type="text/javascript">
            //<![CDATA[ 
            window.onload = function() {
                function test() {
                    alert("TEST");
                }

                function arrayOfOandZ(size) {
                    var arrayOFOnZ = new Array(size);
                    //Fill array
                    for (var x = 0; x < size; x++) {
                        arrayOfOnZ[x] = size % 2;
                    }
                    alert(arrayOFOnZ.join('\n'));
                }
            } //]]>
        </script>
    </head>

    <body>
        <input type="button" value="5 Items" onclick="test()">
        <input type="button" value="6 Items" onclick="arrayOfOandZ(6)">
        <input type="button" value="7 Items" onclick="arrayOfOandZ(7)">
    </body>

</html>

DEMO - Fixed settings in fiddle

no wrap in <head> for example renders the script directly into the head without the window.onload wrapper making it available immediately. Therefore when the elements get rendered the script exists, like this:

<head>
    <meta http-equiv="content-type" content="text/html; charset=UTF-8">
    <title>- jsFiddle demo</title>
    <script type="text/javascript" src="/js/lib/dummy.js"></script>
    <link rel="stylesheet" type="text/css" href="/css/result-light.css">
    <style type="text/css">
</style>
    <script type="text/javascript">
        //<![CDATA[ 

        function test() {
            alert("TEST");
        }

        function arrayOfOandZ(size) {
            var arrayOFOnZ = new Array(size);
            //Fill array
            for (var x = 0; x < size; x++) {
                arrayOfOnZ[x] = size % 2;
            }
            alert(arrayOFOnZ.join('\n'));
        }
        //]]>
    </script>
</head>

JSFiddler doesn't read javascript

2 Answers2