Javascript parses in some way the string parameters of functions?

Question

When I try to pass a string to a function like so

i="file:///bla/bla/bla";
Fade(i);

i get Uncaught SyntaxError: Unexpected token :

so i tried passing a literal in the function like f("img1.jpg"); and i got

Uncaught ReferenceError: img1 is not defined
(anonymous function)

What is going on?

(note that i am kind of new in js)

In particular:

timeout = 3;
var fadetime = 5;
var curr = 0;

var fadedelta = 100/(fadetime*30);
var opac = 100;

//var fadedelta = 100/(fadetime*3);
//prelaod all images just to have them there
var namearr = new Array( "img1.jpg", "img2.jpg", "img3.jpg", "img4.jpg");
var imgarr = new Array();

var i = 0;
for( i = 0; i<2 ; i++)
{
    var tmp = new Image()
    tmp.src = namearr[i];
    imgarr.push(tmp); 
}

function setOpacity(image, op)
{
    if(typeof(image.filters) != 'undefined' )
    {
        image.filters.alpha.opacity = op;
    }
    else
    {
        image.style.opacity = op/100;
    }
}

function fadeIn(isrc)
{
    var locimg = document.getElementById("image");
    opac -=fadedelta;
    setOpacity(locimg,opac);
    if(opac>0)
    {
        setTimeout("fadeIn(String("+isrc+"));", 30);
    }
    else
    {
        locimg.src = isrc;
        setOpacity(locimg,100);
        opac=100;
    }
}


function Fade(isrc)
{
    var locimg = document.getElementById("image");
    var locdiv = document.getElementById("imageArea");

    locdiv.style.backgroundImage = "url("+isrc+")";
    fadeIn(isrc);
}

function aStatus()
{
    var locimg = document.getElementById("image");
    var locdiv = document.getElementById("imageArea");

    alert("background: "+locdiv.style.backgroundImage+"\nforeground: "+locimg.src+"\ncurr: "+curr);
}

function onClick()
{
    curr = curr + 1;
    curr%=imgarr.length;
    Fade(String(""+imgarr[curr].src));
}

and the output is the Uncaught SyntaxError: Unexpected token : error refering to the line before the last (Fade(String(imgarr[curr].src));)

note that imgarr[curr].src is file:///home/fakedrake/webdev/img1.jpg or file:///home/fakedrake/webdev/img2.jpg depending on the value of curr

Answer 1

You most probably have a String that isn't terminate properly before the code you are showing.

var str = "test
// ...
i="file:///bla/bla/bla";
f(i);

The highlight of the code speaks for itself. When it reaches the :, it pops out the error since the synthax is invalid.

Answer 2

I am a bit curious about this line:

fadeIn(isrc);

I'm not sure what that function does, but how do you fade in a string?

Isn't it acually one of the elements that you want to fade in?

fadeIn(locdiv);

Edit:

Seeing the code of the fadeIn function, I see that it should actually get a string. But it's the code in the function that is causing the string to be evaluated as code.

When you call setTimeout with a string, that string will be evaluated as code, and you are putting the parameter in the string without encoding it correctly. You could fix that, but the best is to not use a string in the setTimeout call at all:

window.setTimeout(function(){ fadeIn(isrc); }, 30);

Answer 3

I got a totally different error, about a “missing ) after argument list” on line

fadeIn(file:///some/local/file.jpg);

However, the problem is the same: the interpreter thinks that fadeIn gets a variable name (in this case file:///some/local/file.jpg, which is not a valid identifier) instead of a string.

The solution is simple: add single quotes to

setTimeout("fadeIn('"+isrc+"')", 30);
    // here        ^        ^