How do I find errors in jsfiddle? - javascript

I love jsfiddle and lately I've been learning javascript. There are of course many errors as I learn but I haven't figured out how to read error codes from console.
Latest I have is "1182:12 Uncaught TypeError: Cannot read property 'style' of null"
Each section of my code is less than 1000 lines of code, but clearly combined it's more. Is there a way to use this info to find where the error is happening?
TIA!

The console should show you an underlined section where the line number is that you can click:
The line number does not correspond to the line number in the JSFiddle code editor, but it'll take you to the error location in the browser's Sources panel:
This problem is not specific to JSFiddle. Many online code editors without integrated consoles have this issue, and this solution should work in most of them.

Related

Trying to make two pieces of premade javascript code function together

I don't know anything about javascript but I can't get these two scripts to work together, if anyone could fix my mistakes I'd be very grateful. The scripts are premade from http://www.mf2fm.com/rv/ and function just fine on their own. I've tried to solve the issue myself but I'm unfortunately entirely clueless. I got this error when I tried to test running what I pasted below on a test site; "JavaScript error: Uncaught TypeError: Failed to execute 'appendChild' on 'Node': parameter 1 is not of type 'Node'. on line 48" Line 48 being: document.body.appendChild(stars[j]); if that's any help. The problem seems to be localized to these lines, though they run fine without the second script.
addLoadEvent(clicksplode);
function clicksplode() { if (document.getElementById) {
var i, j;
window.onscroll=set_scroll;
window.onresize=set_width;
document.onclick=eksplode;
set_width();
set_scroll();
for (i=0; i<bangs; i++) for (j=sparks*i; j<sparks+sparks*i; j++) {
stars[j]=createDiv('*', 13);
document.body.appendChild(stars[j]);
}
}}
Well, for one thing, you're copying a script that dates back to 2002 at the very latest. These belong in a museum. I had a whole nostalgic flashback to the 90s loading up that site from your source code.
The error you're getting is that value of stars[j] is not a DOM Node, so appendChild() doesn't know what to do with it.
Since it seems like you're already familiar with the dev console, I'd suggest putting a breakpoint in at that line 48 where you see your error and seeing what is actually being passed to appendChild(). Then you can walk up the stack trace to see where that bad value is coming from. You can also, in chrome dev tools, turn on "pause on exceptions" to automatically stop your code in the debugger when an error is thrown. It's the icon of a pause button in a circle in the upper right of the source tab in the chrome debugger.
Best of luck!

Slick slider console error

I am currently getting this console error from slick slider:
Uncaught TypeError: b.$list.prop is not a function
I am using this slider on three different sites -all implemented the same exact way. It was working on one of the sites until one day it just went blank. The error I get is on slick.min.js Has anyone else run into this problem? Does anyone know what this error is? Thanks in advance!
UPDATE: Here's a dev site that has the issue: http://dev.semananews.beta.lionheartdms.com/ With #Radiance suggestion, I loaded slick.min.js at the end and it now displays the image but the slider doesn't work still. I now get this console error
Uncaught TypeError: a.type is not a function
Check if you have added the external js files correctly. According to me the error is occurring because the compiler is not able to find the function which you are using
Did you check your jQuery version? Slick requires jQuery 1.7 to function properly. (https://github.com/kenwheeler/slick#dependencies)

jquery.dragtable.js, simple error, WTF solution

Sorry for bad title, but I'm at a loss here.
I am implementing akottr's dragtable jquery for reordering columns in a table, and have no luck, source code and demos here https://github.com/akottr/dragtable and here http://akottr.github.io/dragtable/
In the source .js file I put,
$(document).ready(function () {
$(".reorderable").dragtable();
});
And my table has reorderable in its class, which should have been all I need
I get:
Uncaught TypeError: undefined is not a function
on $(".reorderable").dragtable(); in Chrome dev tools surprise surprise $(".reorderable").dragtable returns an undefined
The demo works and is the same source files, am I missing something to register the dragtable method?
I tried to use dragtable today and got the same error. The error went away when I corrected the order javascript files were loaded and also I used the dragtable.js from demo
http://rawgit.com/akottr/dragtable/master/jquery.dragtable.js
its working fine for me. Seems like a very old question,may it help others :)

Javascript snippet not working in Chrome, but works in Internet Explorer

I have a really basic snippet of javascript code that works in Internet Explorer, but not Google Chrome. Here's the line it breaks on:
var formChildren = document.getElementById('myForm').children;
This is the first line in my script. The error I receive is:
cannot read property 'children' of null.
Does anyone know if I'm missing something? I can't imagine why Chrome would error out on such a basic line.
This is part of an MVC 4 project if that makes any difference.
Thank you in advance!
Chrome actually does return null in an instance where it is unable to find an element with that ID. You could hide this error by using (document.getElementById('myForm') || {}).children
My problem is solved. Yes I did some extra testing and realized that I was able to use getElementsByName successfully on both IE and Chrome so I took a look and realized I forgot to add the Id to the form. It was still unexpected that IE knew what it element was without the id set, but the problem is solved.
Thank you Kyle and hackNightly, your input helped a lot in narrowing down my answer.

Javascript error on code for Draggable SVG shape

I'm working with some code provided via this post, courtesy of #Phrogz.
I've now tweaked and trimmed it to a launch-point for my needs, so I'm trying to plug that JS into my test page.
I threw a copy of my test page here on Pastebin.
I'm getting this error (courtesy of line 126):
Uncaught TypeError: Cannot call method 'addEventListener' of null
My attempts to this point have all revolved around the guess that the updateFromInput function is at the heart of the error. I played with it all the ways that I could think of, and no dice :)
Granted, though, I'm faaar from being a JS master, so ...
Can someone explain why the error?
Apparently, input_1 is null.
The problem could be with querySelector. You could instead try getElementsByClassName.
Oh, your class on your element is "input1" but you're selecting "input_1". Easy mistake :)

Categories

Resources