Imagine this: You want to make some things with a XML element you receive in a method. So you try this:
function makeNiceThings(XMLDOM){
if(XMLDOM.getElementsByTagName("err")){
makeReallyNiceThings(XMLDOM.getElementsByTagName("err")[0].childNodes[0].nodeValue);
}
}
So, Javascript tells you you're trying to call childNodes[0] from a null reference. But if you try:
function makeNiceThings(XMLDOM){
if(XMLDOM.getElementsByTagName("err")[0]){
makeReallyNiceThings(XMLDOM.getElementsByTagName("err")[0].childNodes[0].nodeValue);
}
}
It works flawlessly.
However, you update the page sometimes, and both are working again, no problems at all.
I have already faces so many situations like this, that I really want to know if there is a place I can show these bizarre errors in order to make javascript even better. Google returned me nothing but places to discover programmer errors. Ideas?
Well, I don't see an issue there. In the first example you may get and empty array which is not nothing. So the condition becomes true. Whereas in the second example you do what you really meant to do — check if there's an element with index 0.
Or, if you are really convinced that this is not your fault, you should do what Rocket Hazmat said:
Bugs with JavaScript itself should be reported to the bug tracker of
the browser. Though, chances are this is not a bug with JavaScript.
But most probably this is a mistake in the code. If there's no err elements, you'll get an empty array and the condition will be evaluated to true; but there's no 0th element — that's why you get an exeption.
Hope that was clear.
Related
I am following a tutorial on W3Schools to make a JS slideshow. While this seems simple enough, even after directly copying their code, my JavaScript is having some VERY nonsensical and frustrating errors. The issue seems to be that, when my function accesses document.getElementsByClassName("slides")[some_index_here], it returns undefined, despite that, when I access the SAME element in the exact same way through inspect element console, what I am looking for shows up. What is going on?
I found that I needed to wrap what I did in a window.onload function, because the code was executing before elements existed.
I am trying to debug this game I am making. Something is wrong with the for loops and I do not know what it is; essentially I am trying to get my rectangles to spawn on the canvas after the user clicks ready. What are some ways to debug logic errors? Doing this over khanacademy.
When I println the drawRects function. Console says infinite loop and points to my for loops.
When I click ready, the console increases by 1 each time so I know the levelUp function is working.
I cant post another link because not enough rep, but when I println randomRects, nothing appears on the console.
Therefore, I believe it is safe to assume something is wrong with my for loops, because the levelUp function works but the random rectangles are not appearing. What are other debugging techniques I can use to narrow down the problem?
You debug a problem by finding out exactly what the code is doing.
There are a few ways to do that:
Use your head. This is your first line of defense. Run through the code in your head, or better yet with a piece of paper and a pencil. Use some example values for your input, and walk through line by line and see what the code would do. Talk out loud, write stuff down, and do this over and over again. This is a huge part of being a programmer.
Use a console. Processing has a println() function that should go to your JavaScript console in your browser. This is your new best friend. Print out the values of any variables you want to know about, like this:
println("x: " + x);
Or a simple println("here") inside an if statement can tell you whetehr that if statement is executing. Combine this with approach one to really check all of your assumptions.
Use a debugger. If all else fails, step through your code with a debugger. This is basically using a computer to do the first two approaches.
In reality, you'll use a combination of all of the above to debug a problem. But the basic idea is this: you need to understand what your code is doing. You do that by first running through the code in your head or on a piece of paper, and you test any assumptions or anything you aren't sure by printing stuff out.
function myfunction(id){
//code
$("#mydiv").hide();
};
But 'mydiv' is dynamically added , and the function is not working .
Since the part of the code you shared seems to be fine, I suspect that there is something else wrong with your code.
Try to debug it. It is not that hard and let's you figure out errors on your own much faster than looking at your code really hard.
First if would be good to know if you reach that line of code in question. You can open the developer console and add a breakpoint to the line in question, or you can add alert("this line is reached and executed") in your code, and then you will know if that line is reached and executed.
If you reached the line in question, it would be good to know things about what is happening there:
For example it would be good to know if $("#mydiv") matches anything. If you are afraid of the developer console, you can always try: alert($("#mydiv").length). If it's 0, there is nothing matched, if it's 1, you have matched an element that will be hidden if you call $("#mydiv").hide(). If it's 0, you haven't been able to match an element. That means that there is currently no elements in your DOM with the id of mydiv. It does not matter if it should have been added dinamically or should be there from the start, it's not there. You might have made a spelling mistake in the id.
Since you are matching something added dynamically by it's id, it is possible that you already have an element with the ID mydiv. If there is more elements with the same ID, only the first one will be matched! More than one elements with the same ID is not just bad practice, it's invalid, and will possibly lead to more bugs and headaches later.
If you are sure that you match the correct element and it's not hidden when you call $("#mydiv").hide(), than there is always ways to look for the problem: for example if you open the javascript developer console, the javascript errors will be listed there. Be sure to check them if they are related to this problem.
Happy bug hunting!
Make sure that you're calling $("#mydiv").hide(); after you've added #mydiv. The code itself will work absolutely fine, provided you've already added #mydiv.
I saw several specific questions about this problem - getting typeerror object doesn't support this property or method in IE8, each with its specific answer.
Suppose I have a large website with lots of code ... I don't know what specific snippet is causing this error.
Is there a general method to debug this? I've tried with the IE Developer Tools, and it doesn't break on error. Is this caused by incorrect javascript syntax? Should I try something like js lint?
What's the correct, general way to identify and deal with this problem?
OK, so I turned to the age old solution and started to delete massive chunks of code from my project until the problem was "fixed". This helped me locate the problematic file.
I then proceeded to delete function by function until I found this little snippet: str.trim(). A quick search turned this up.
Update: Actually, I just realized something ... the problem was just a normal exception, and passing it to alert() masked the details. If you let such exceptions go to the top, then whatever browser you use will display useful line information. So, the next time it happens to me, I'm going to look for a way to make the exceptions fly high outside of the top level function. The catch wasn't in my code, it was jQuery, so I'm still not quite sure how to do it.
I'm sure I'm overlooking something here but, I have code like so (its more complicated but I think I can safely break it down to these components):
setTimeout(window.location.assign(page),400);
page is a url like 'http://www.this.com'
The problem is that the newly assigned page has RANDOM numbers appended to it. To clarify, instead of being redirected from here.com to here.com/there, it goes here.com to here.com/-54
It looks like I'm returning a value somewhere but I'm not sure where the misuse is as I'm unfamiliar with this function. Anyone see where things have gone awry?
Thanks!
I tried this out in Firefox and I'm not getting any problems (well, other than what #Gerben mentioned in comments)
setTimeout(window.location.assign("http://google.com"),400);
So, I have some questions for you:
What browser are you using?
Have you tried this and experienced the same problem in other
browsers?
Have you tried checking the string in the page variable? alert(page);
FYI #Gerben means to rewrite your code like this if you want the timeout to actually work
setTimeout(function() {window.location.assign(page);},400);