Two versions of a playButton Binding Audio With a grid link structure

The right order is given to you by JSLint.

I can tell that you haven’t been using that, because your code is full of problems right now.
Let’s use JSLint to remove those easy to fix problems from your code.

To get annoying spacing issues dealt with, run the code through JSBeautifier or other code indenting tool, so that it has a nice 4-space indent.

JSLint tells us undefined document for which we can scroll down to the bottom of the page and tell it to assume a browser

The next issue is that a call to upTo is out of scope. That means that the function is further down below, when it should be above. The issue occurred in the togglePlayButton function, so move the upTo function up above the togglePlayButton function,

The next issue is a strange one, Redefinition of 'button' from line 18. Why is it being redefined? It’s the first thing that’s being done in that function. But, comparing that function with other ones around it, we can see from the indenting that the togglePlayButton function is missing a closing brace to end the function. Put one of those in, and that issue is dealt with. It does mean indenting the rest of the code though, so passing the code through JSBeautifier again is an easy fix for that.

The next issue is Unexpected 'this' which is dealt with by removing the this keyword and using getPlayButton instead.

The next issue is a really strange Expected ')' to match '(' from line 0 and instead saw 'function'. which shows that JSLint is getting really confused. Looking at the code it’s because you have too many closing braces up above the function. Get rid of one of them (and re-indent the code with JSBeautifier), and that issue is dealt with.

The next issue is that 'getPlayButton' is out of scope. which is because the event handlers are higher up than they should be. Move the getPlayButton function up above the event handler to fix that one.

Then we have Undeclared 'evt' which is because the function parameter is empty. Tell the click event that it’s to expect evt as a function parameter and things go well there.

Next there is an unused 'linksClickHander'. Is that because it’s left over from other code? If so, remove it.

Then we have, Redefinition of 'playButtonClickHandler' which tells us that we have a duplicate of that function. Remove the one that’s not needed.

The code now has no more problems according to JSLint, and putting that code back in to JSFiddle shows that it now works. There is one remaining issue, but that’s easy to spot during testing, and fixing it is easy.

That’s what’s needed to fix this code, and using JSLint makes it easy to clean up your code so that easy to fix problems can be found and dealt with.

1 Like