Weird syntax error when calling a function for onclick event

I have this script on my page:

var diffedTimeScnds = 600;
var diffedTimeMints = 10;

timer = setInterval(function()
    {
        diffedTimeScnds-- ; 
        document.getElementById('counter').innerHTML = diffedTimeScnds + " left for sending token once again";
        if((diffedTimeMints > 10) || (diffedTimeScnds <= 0))
        {
            document.getElementById('counter').innerHTML = "<a href='' style='color:red' onclick="expireCode()">Send again</a>";
            clearInterval(timer)
        }
    }
,1000)

function expireCode(){
    window.location.href = {!! json_encode(route('auth.login.next.token', 'e')) !!}
}

And I get this error:

Uncaught SyntaxError: unexpected token: identifier

Which is referring to this line:

document.getElementById('counter').innerHTML = "<a href='' style='color:red' onclick="expireCode()">Send again</a>";

I don’t know really what’s wrong with this line that returns syntax error!

So if you know, please help me, I would really appreciate any idea or suggestion…

>Solution :

When you use

innerHTML = "<a href='' style='color:red' onclick="expireCode()">Send again</a>";
                       //your string ends here    ^

Use ' as with href=''

document.getElementById('counter').innerHTML = "<a href='' style='color:red' onclick='expireCode()'>Send again</a>";

Or if you prefer to have " in your html interchange ' and " in your assignment

document.getElementById('counter').innerHTML = '<a href="" style="color:red" onclick="expireCode()">Send again</a>';

But that doesn’t really matter.

The important thing is: The quotations marks enclosing the string value have to be different from the quotation marks that should end up in the result. Or if that isn’t possible, escape your quotations marks with a backslash \"

    innerHTML = "<a href='' style='color:red' onclick=\"expireCode()\">Send again</a>";