Javascript quotes
I want to update the img element in a div every 5 seconds to indicate if the user is connected to the internet or not. If the user is connected, it will display an online image, but if the user is offline, it will display a local image.
However, I cannot get around this quote issue. I even tried "& amquo; -quot;" (no dash) and it still won't 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 have no desire to use jQuery or Ajax or any server-side languages because it's all on the local machine.
source to share
You can avoid these 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 tell JavaScript that you want to insert a double quote inside your string. Another option you have is to use single quotes. (I changed your getElementById from "test" to 'this' since your HTML doesn't have "test" as Id)
Also, you shouldn't call the function using a string like you did on refreshDiv
. Instead, you should call its name like this:
window.setInterval(refreshDiv, 5000);
source to share
You must use a hierarchy of single quotes and double quotes. Using double quotes within double quotes makes JS thought to be a combination of strings. But it doesn't work without 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 the fact that instead of checking every 5 seconds, I suggest going over and using online and offline browser events, which then saves your code from setInterval
things.
source to share
In JavaScript, you can use single quotes or double quotes. For your case, you have to put the string containing the div in single quotes and have HTML attributes inside that string using double quotes. However, it looks like you have a few more bugs in your code. Try the following:
<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);
source to share