Quotes issue in Javascript

Question

I want to refresh an img element within a div every 5 seconds that would indicate whether the user is connected to the internet or not connected. If the user is connected, it will display an image online, but if the user is offline, a local image will display.

However, I cannot get around this quote problem. I even tried the "&-quot;" thing (without the dash) and it still will not work. Here is the code:

<script type="text/javascript">
    window.setInterval("refreshDiv()", 5000);
    function refreshDiv(){
    document.getElementById("test").innerHTML = "<img id="this" src="http://stallionware.weebly.com/uploads/3/0/4/3/30431988/4901948_orig.png" onerror="this.src='nowifi.png'">";
}
</script>
<div id=wifi>
<img id="this" src="http://stallionware.weebly.com/uploads/3/0/4/3/30431988/4901948_orig.png" onerror="this.src='nowifi.png'">
</div>

I do not have the desire to use jQuery or Ajax or any server-side languages because this is all on a local machine.

Answer 1

You can escape those double quotes like this:

document.getElementById("this").innerHTML = "<img id=\"this\" src=\"http://stallionware.weebly.com/uploads/3/0/4/3/30431988/4901948_orig.png\" onerror=\"this.src='nowifi.png'\">";

By typing \" you're telling the JavaScript that you want to insert a double quote inside your string. The other option you have is to use single quotes instead. (I've changed your getElementById from 'test' to 'this' since your HTML has no 'test' as Id)

Also, you shouldn't call a function using a string as you did on refreshDiv. Instead you should call its name like this:

window.setInterval(refreshDiv, 5000);