Question

I have a function here that toggles opening/closing a div:

function searchAnimate(goTo) {
    if (goTo == "open") {
        $("#searchdiv").animate({
            bottom: 2,
            right: 0
        }, 1500);
        document.getElementById("openclosearrow").innerHTML = "<div onclick='searchAnimate('close')' id='openclosearrow'>&harr;</div>";
    }
    if (goTo == "close") {
        $("#searchdiv").animate({
            bottom: -45,
            right: -218
        }, 1500);
        document.getElementById("openclosearrow").innerHTML = "<div onclick='searchAnimate('open')' id='openclosearrow'>&harr;</div>";
    }
}

The error is Uncaught SyntaxError: Unexpected token }. I have tried to fix it many ways, but I guess my eyes are just not working today… Can anyone help? Thx!

P.S. If it helps, I am using Chrome.

EDIT

Here is the HTML code:

<div onclick="searchAnimate('close')" id="openclosearrow">&harr;</div>

Answer 1

There are better ways of doing this and the mixing of DOM and jQuery is a bad idea, pick one way so it is standard.

One issue with your code is the quotes are wrong, they need to be escaped

"<div onclick=\"searchAnimate('open')\" id='openclosearrow'>&harr;</div>"

The problem here is you are replacing the innerHTML of an element with the same code so it would look like this after the first replace

<div onclick="searchAnimate('close')" id="openclosearrow"><div onclick="searchAnimate('close')" id="openclosearrow">&harr;</div></div>

I doubt that is what you want.

What you should do is replace the event handler.

$("#openclosearrow").off("click").on("click",function(){ searchAnimate('open') });

Better yet is not to replace click handler but to detect the state.

function searchAnimate() {
    var stateSettings,
        newState,
        elem = $("#searchdiv");
    if (elem.data("state")==="open") {
        newState = "close";
        stateSettings = {
            bottom: 2,
            right: 0
        };
    } else {
        newState = "open";
        stateSettings = {
            bottom: -45,
            right: -218
        }
    }
    elem.data("state",newState).animate(stateSettings, 1500);
}