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);

Answer 2

You should use a hierarchy of single quotes and double quotes. Using double quotes under double quotes makes the JS think is a combination of strings. But it fails without the operators.

<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>

Apart from that rather than checking every 5 seconds I would suggest going and using online and offline events of browser - which then saves your code from having setInterval kind of stuff.

Answer 3

In JavaScript, you can use single-quotes or double-quotes. For your case, you should put the string containing the div in single-quotes and have the HTML attributes within that string using double-quotes. However, it looks like you have a few other mistakes in your code anyway. Try this:

<img id="image" src="http://stallionware.weebly.com/uploads/3/0/4/3/30431988/4901948_orig.png" onerror="error">

with the following in your Javascript:

var theImage = document.getElementById('image');
function error() {
  theImage.src='nowifi.png';
}

function refreshDiv(){
  theImage.innerHTML = '<img id="image" src="http://stallionware.weebly.com/uploads/3/0/4/3/30431988/4901948_orig.png"     
  onerror="error">';
}
setInterval(refreshDiv, 5000);