Question on using javascript

General Questions
#1

Here is a javascript I wrote and works fine as an HTML file

Because I’m using it on multiple pages, I really want to make it into an external .js file. I moved
<img src=“Chrysanthemum.jpg” height=200 length=250 id=“rotator”>
into my HTML file and changed the rotation timer from a line to a function
function startrotation () {t=setInterval(“displaypix()”, 5000);}
so it can be called from the HTML file.
<input type=“button” onclick=“startrotation()” value=“Start Slideshow”>
So I run it and nothing. I checked and the
<script type=“text/javascript” src=“picturerotator.js”></script>
is in the HEAD section so the script should be loading. My thought is that as “rotator” is initialized in the HTML document, that when the javascript has to use it, it has no clue what to do. Any ideas?

#2

First thing to do is to make sure the javascript really is being loaded. What browser are you using? Do you have any add-ons like web developer that will show you the loaded javascript files? Or, alternatively, when you click the button are you getting any errors in the javascript error console?

#3

IE8
No indicator that it is being loaded. Is there a good add on for that?

#4

When the script gets loaded in the <head> tag, anything that’s not a function will get executed immediately. So this line:

var pic=document.getElementById(“rotator”);

will try to grab the element with the id “rotator”. But since the document hasn’t been loaded yet, that element doesn’t exist. Then, when your functions get called, pic is undefined. I’d expect some errors to show up in the console.

As a quick fix, try putting the <script> tag at the bottom of the HTML file (just before the closing </body> tag) instead of loading it in <head>. That way, the document should be loaded enough to work. Another option would be to change your functions to grab the element when needed rather than when the script is read.

#5

Firefox, Chrome and Safari all have excellent debuggers and developer tools. Use one of those for development. Trying to write Javascript without one is just a waste of time.

#6

Or, if the logic works right for your needs, put that code into a function and arrange for it to be called via the window.onload event.

#7

As mentioned the script tag must be placed after your image in the document like this or you’ll have to adjust the code.


<img src="1.png" height=200 length=250 id="rotator">
<script type="text/javascript" src="picturerotator.js"></script>

My personal recommendation for working with html/css/js would be firefox + firebug (extension).

#8

You should be able to use the developer tools that come with IE8 - does an option called “Developer Tools” show up under the Tools menu? I don’t think it’s an add-on but I could be wrong. Alternatively, you can pull it up with the F12 key.

Once you have them up, there’s a tab called “Script.” Click that. On the tool bar that appears, there’s a button called “Start Debugging.” To the right of that is a drop-down. If you click the down arrow on the drop-down, it will list all the loaded javascript files. Does yours show up? If it doesn’t, it’s not loading it correctly.

But also, what tellyworth says is right. Nowadays, there are some debugging tools built-in to IE8, but overall, I much prefer Firefox and Chrome. The Web Developer add-on for Firefox (and I think also for Chrome…) is a must-have if you’re doing this kind of stuff very often.

And everyone else who is telling you about what’s loaded when are also right - you have to load the stuff in the right place, or it won’t work.

#9

IE8’s developer tools are probably fine too, I just have no experience with them (wasn’t even sure it had any).

#10

I’m a javascript newb myself, and there are parts of the OP script that I don’t understand much. In the line

var t=setInterval(“displaypix()”, 5000);

Does that actually work the way it should? Should the function displaypix() be quoted as shown, or will that be interpreted as calling setInterval(var, var) with a string argument and an integer argument?

Does function displaypix() need to be defined before it’s first called?

#11

Oddly though it may seem, yes it’s suppose to be in quotes. The function displaypix() won’t need to be defined until the setInterval() function is called.

#12

Great tip. I put it right after my <img src …> line and the pictures rotate :smiley: .
Only problem now is the fadein and fadeout functions are not working right even though they are being called.

#13

More info. Using IE9

The script as a self-contained HTML files fades in and out unless in compatability mode but when used as an external file in IE9 it does not fade in or out. :confused:
Firefox and Chrome fade in and out perfectly.
So apparently the way I’m setting the alpha doesn’t work with IE, at least consistantly. Getting late so more research in the morning.

#14

Use jQuery.

#15

This advice, while good, is completely irrelevant to solving the OP’s problem.

#16

The correct way to set this up is to tie it to a browser event. Specifically one that gets called right after the DOM becomes available.

This has already been suggested, but I wanted to also recommend using an API to work with javascript.

The abstraction of the various browsers and browser versions will save your sanity.

With jquery you would call your code from within the following:

$(document).ready(function(){
// your code here
});

This would trigger your code the moment the DOM is fully accessible to it.

#17

The code execution is not the problem. The problem is that IE apparent has unique ways it likes to handle alpha=>opacity and that has been changed again for IE9. It’s just a matter of tracking down the right function.

And for the jquery advice, I have heard from people in the field that the way to go in modern times (ie 2012) is CMS.

#18

google search terms: html opacity ie9. Here are those results:
link

This one looks promising:
First Link

Hope it helps!

#19

Again, why using an API with javascript could help. This time it was a change in the way a particular browser version of a particular browser brand handles a particular instruction. Next time it could be 3 different browser versions from 2 different browsers having issues with 5 different pieces of code.

Other people have done the heavy lifting of abstracting that nonsense. You don’t want to waste time re-inventing the wheel.

Also, CMS? Is that supposed to be content management? That’s not really a javascript solution. Unless you meant MVC, as in model, view, control which is another way of handling complex javascript - many js API’s are available which handle MVC quite well.

#20

As does IE8 and IE9. (And earlier versions of IE back to 5, but it was a separate download.)

Don’t let the anti-IE snobs get to you, hehe.