I am randomly selecting an id using an and using it to manipulate the CSS.
But I am getting an error as
Uncaught TypeError: Cannot set property 'onclick' of null
(anonymous function) # ReactionTester.html:101
<!DOCTYPE html>
<html>
<head>
<title>Reaction Tester</title>
<style type="text/css">
#box {
height: 200px;
width: 200px;
border-radius: 10px;
display: none;
}
#circle {
height: 200px;
width: 200px;
border-radius: 100px;
display: none;
}
#score {
display: none;
}
</style>
</head>
<body>
<p id="score">Your reaction time was <span id="reaction"></span></p>
<div id="box"></div>
<div id="circle"></div>
<script type="text/javascript">
var shapes = ["box", "circle"];
var shape = Math.random();
shape = 2 * shape;
shape = Math.floor(shape);
var finalShape = (shapes[shape]);
console.log(finalShape);
var createdTime;
var clickedTime;
var reactionTime;
function getColor() {
var colors = ["#0E7AC4", "#f1c40f", "#9b59b6", "#e74c3c", "#f39c12", "#c0392b", "#2c3e50", "#59ABE3",
"#6BB9F0", "#26A65B", "#65C6BB", "#86E2D5", "#4DAF7C", "#F5D76E", "#FDE3A7", "#F9BF3B",
"#FDE3A7", "#F4D03F", "#EB9532", "#F2784B", "#F5AB35", "#F9BF3B", "#ABB7B7"
];
var color = Math.random();
color = colors.length * color;
color = Math.floor(color);
console.log(color);
return colors[color];
}
function makeBox() {
createdTime = Date.now();
var color = getColor();
console.log(color);
document.getElementById('finalShape').style.backgroundColor = color;
var time = Math.random();
time = 5000 * time;
time = Math.ceil(time);
console.log("Coming in : " + time);
setTimeout(function() {
document.getElementById('finalShape').style.display = "block";
}, time);
}
***Error shows up here*** document.getElementById('finalShape').onclick = function() {
this.style.display = "none";
clickedTime = Date.now();
reactionTime = clickedTime - createdTime;
document.getElementById('score').style.display = "block";
document.getElementById('reaction').innerHTML = (reactionTime / 1000) + " seconds";
makeBox();
}
makeBox();
</script>
What am I doing wrong ?
document.getElementById('finalShape')
Looks for the element literally named finalShape (and since there is none, returns null, and the error says you cant set an clickhandler on that), you want to use the variable finalShape, like so:
document.getElementById(finalShape)
Related
This question already exists:
How to apply a Javascript animation function to multiple elements in for loop? [duplicate]
Closed 10 months ago.
I am trying to apply animation to all of the images created in a for loop without manually doing it, but none of the images created in the for loop are showing any animation, I have tried in multiple ways such as using forEach and a regular for loop paired with querySelectorAll. When I tried to fix my problem with those methods, it either only affected the first image from the for loop or nothing happened at all.
Essentially, what I want is to make it so the 10 images created prior in a for loop can have the same animation as the first image that is being animated across the screen. I also want the other images created to have the same functionality as the first image, when the image is clicked, the click counter should also work similar to that of the first image sliding across the screen. Please help.
Full code is linked here: https://code.sololearn.com/Wwdw59oenFqB
<!DOCTYPE html>
<html lang="en">
<head>
<title>Test</title>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<style>
body {
zoom: 25%
}
.circle {
display: block;
background: black;
border-radius: 100%;
height: 100px;
width: 100px;
background: radial-gradient(circle at center,#31f541, #000);
}
.container {
width: 100%;
height: 100vh;
display: flex;
justify-content: center;
align-items: center;
}
.circle-image{
z-index: 2;
position: absolute;
margin-left: 50%;
margin-top: 50vh;
border-radius: 50%;
}
</style>
</head>
<body>
<div class="container">
<img id = "firstImage" style = "height: 1000px; width: 1000px;" onclick = "change(); clickCounter(); animate(); saveData();"class="circle-image" src="data:image/jpeg;base64,/9j/4AAQSkZJRgABAQAAAQABAAD/2wCEAAkGBwgHBgkIBwgKCgkLDRYPDQwMDRsUFRAWIB0iIiAdHx8kKDQsJCYxJx8fLT0tMTU3Ojo6Iys/RD84QzQ5OjcBCgoKDQwNGg8PGjclHyU3Nzc3Nzc3Nzc3Nzc3Nzc3Nzc3Nzc3Nzc3Nzc3Nzc3Nzc3Nzc3Nzc3Nzc3Nzc3Nzc3N//AABEIAIQAWQMBIgACEQEDEQH/xAAbAAABBQEBAAAAAAAAAAAAAAAGAAIDBAUBB//EADsQAAIBAwMCAwYFAgMJAQAAAAECAwAEEQUSITFBBhNRIlJhcYGRFDJCofDB0SMzsRUkJVNiY5Ki4Qf/xAAYAQADAQEAAAAAAAAAAAAAAAABAgMABP/EAB8RAAMBAAMBAQEBAQAAAAAAAAABAhEDEiExQTJRBP/aAAwDAQACEQMRAD8AMAM1V1S7/BRI7ZwzbeKu45rJ8VRFtIaRR/lOrfTp/Wov4VlbSLlpeRXEWVkBPcHgj6VaAyOtCen3BghWd2AJ5OWxgVonUHaPzbJtxUZaPggj1GKDrqtKPj1+G4qmuiM9axG1SdUG4AEruxVaLVLozZ39DgCpP/olGXBRtahothqSBL+yguF/7iA4+vah+f8A/N/DLsXNk8WeoSdwPtmtE6pdkP5YDBf3NUbvU7gkrdzbe+wcAf3p5503iA+F/pUHhjwrpkgaHTo55F7zs0gH0JxRtoU4ng9hVVF4AVcAfSgvfbsm4SqW9G/oaK/CqkWAdujMcU+6zVCUhLHmpcH1qKOpOaJIG8dqbdwLPaTQuMq6EGp8YNcdcxsM4yDWCeXRPcQXgtmupI4W5ymDj55HFb9m8VsuLbALctkdfjxWdqls5vvNtwFyMPj9WK09KsAwUyE4PAPpUq98R0Ov0iuLnN2gYjocE9M1HbTqszO54RSTiu3NiDHc7mDski7cfOo9MtPPvnhlUgPKvX3ev9q5HDTKzXhr2MiGEhc9SRnqarXkUbuznIk7N3rXhtE8+XB9lD2p0+ng+2EIJHGarxy5+i1WglaQXV9cbZUIWMgt64+VemafAsFtFEgACqKGNN0qddQa4nUhSu0DPB+NFqj2QDjoOa6ZJc1biLUbdqmyPU1ViOKmzTkDHA4Ga48SsjL0yKcoPNdHUUAHmupXRsrya3cMzK2FA70IeJ/EusW9yIILk28SqMBAP3Neh+M9OX8WLkthnXBz2NCH+yYtRn/4gkm7oHU/mFQhqK9L52nwl8K6vNemfbLK6Ryqf8XBYgjvgAdc0eaZZCeRnTjnP2/goN0RItLuzBa2vkRTsAGkPJx3JPWj4XDWsAW2IkZ8rgdc0z6uu2eDTNJYeVa5431KPX7iOzvWtbVZHUGOEOTtyO5GcsPXgetek+E9cuNS0GC61PaH3FPMRSAceorC1DwNpV7OLt1ktJGbdJEBwW+o4z8KItJtQtumnxRiOziGAPe+JprqanJFlNPWbMU4klEanOPh2q8eO/SqOmWzRK5Yg4OF+VXwD6fOtxziEt6yRDg89q7vH8NR9+mfia7g+g/n1qghX4yfnSGO9RhwwDDvTlGfpWFMbxXDDNpjeavI/KQO9BlisEMi7trrnoq5A+db3ja8LAWiSez+oLQXFJJbkYJEe7C8dT6motrsWlPqE2sSabPYiC6iKqDlHjO0q3qDzS8FarZQXRN2GknyUSSTrt7cUNpq7bvbQSLWlFqEUv8AlW5LDoSKsuSTZSWHot7Lp8lvJJIPabngHJrNtC8k26EmODoT61l6bNcTAMYyvoWrYtYzI4cggDpkYzU7qfqNM1+hHHGqxgL0ru3HOeKjtiTGuSOBTyeRnGMVReol8Ywjnkc0tx9B9qcRwO2TioMt7p/asYz9Mm8+zjcd1Bq2X2qze6M1i+FpRJYKpPKjH2OK17s4tpCOu04x64oaBnmusXgudQn5w+7GCTUBiDRqrjjHf1qtLJiVi8gD5POMU+zuvOcxSHcw5GBg8VCVp0PxF+w8PpJ5bkNtY4HpRdpWiWykx42uvH7VR0GfMTJIApbBA900QW0pkLyKMeYQTnscAH/SqriWk3yMSafbwPhjuOeFNTuAH2oAcdsVn36+RG8itiVuASc/am2NxOx/3m4xH37E/WtfHgZts27KVSWQMSR1PYVZHtcYx061QspCzHy1UQjoB1Pxq7uGfX4UY/kTk/oW0c7qZlvQU9mH6T0Hao/Z+H/lTAAfwzd+WJkJ43ZHyOP7UTRXcTqVJ615rbX5t5GKH8wq+mtyAdeaTsHB+qWUSXM8DMn5iVB7g+lC/leRqkaISuX5FFkcqXUnmMhLMv5sftWPrlt+GniuFH6wf3pV4U+o39PnARsDlQCKJLOU+WFTvk5+FClo+xQ6+7RBplyrxxjncw+wrokjSI/Flv59pboz4BuE/YE0zTIwqqXVmPQNU2vXURezhboXLf8AqamsvL/JHGGOeppOZoeE0bemwiKIscgsc+1U7MMhTw1MUlY1PcDmm7lkYnjdQn4CvWPCnII4GccCltP8amiR4c7/AGhjAIqT8RH/ANVE2HiUIwcjrU+4AVDHx0p7da5ygS6BeQeQIyR5oOMN0xT/ABLJbyQJAux5GOSVbO2hV8gcVbsruNxtc4ZabfDYX4lYSAxkHC+yDWxps8i7AwXaFOD9qyIYDv3BsjpkelXYUdME42AYqiYrG6neb9Ri3jlDkEfGiLSbgOVXZtLHAz3rFg038TMHcDg8UV6ZB/iKoHC0v1+h3zw1BwowR8eaYVjyGxjmpSVK8fSoZVLDk8+oqgguMn0x9qZti979/wD5UYk8olXBYetP/FL6j7GgE8pj0qUD8pqOazlTOUOMelejDT4wv5ail0uJ/wBPwxS9A6eayo3OQRUJgdIwQpJIzmvRJdAifkqMH4VFF4e8sso8t0I9jd1X4fGlcMZVgBtf3Vn5cm0lCeR8KJLOeaeZCkDbCc4PpW7e+GYruzeJAqyFPZOOAan0eNR5azKsMxGDGR3HBx602NIGpsWnJOm1WiIY84AohtYliVuPbJ5NPCqFXaOi8/OuIecY6E5opf6Bseo9nA64610bcZPYenNNBw23BIHHSub8MQM/amARTRK+SwBPc5HpUP4KP3D9hVmTjlenyrm0f82sYqsxCkjt/enI29sN6fz/AFpUqBjp/Lk9hxXUUEtSpVjD04OMnjpUnBxkClSogOljj5iuRHJI90ZFcpVjDixJJPf+tMYYVcfqzmlSrBHSLjjPcD7ml+HT1NKlWCf/2Q==">
<img id = "secondImage" style = "height: 1000px; width: 1000px;" onclick = "animate();"class="circle-image" src="https://en.meming.world/images/en/thumb/e/e2/Crying_Cat_screaming.jpg/300px-Crying_Cat_screaming.jpg">
<p style = "transform: scale(10, 10);"id = "clicker">Kitten has been pat: <a id="clickCounter">0</a> times in <a id = "timeCounter">0</a> seconds</p>
<figure class="circle"></figure>
</div>
<button onclick = "saveData();"id = "saveButton">Load progress</button>
<script>
const cats = [];
for(i = 0; i < 10; i++){
var img = document.createElement("img");
img.setAttribute("src", "data:image/jpeg;base64,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");
img.className = "catSwarm"
img.addEventListener('click', function handleClick(event) {
change(); clickCounter();
});
img.addEventListener('load', function handleClick(event) {
})
document.body.appendChild(img);
cats.push(img)
}
let clicks = 0;
function clickCounter() {
clicks += 1;
document.getElementById("clickCounter").innerHTML = clicks;
if (clicks != 10) {
}
else {
alert("Kitten has been pet 10 times")
}
};
let time = 0;
function timeCounter() {
time+=1
document.getElementById("timeCounter").innerHTML = time;
setTimeout(timeCounter, 1000)
if(time != 10) {
}
else{
setTimeout(function() {
alert ("Kitten has been pet " + clicks + " times in " + time + " seconds" + " with a whopping pats per second rate of " + clicks/time + "!")
}, 10);
}}
timeCounter();
function change() {
if(document.getElementById("firstImage").style.src = "data:image/jpeg;base64,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") {
document.getElementById("firstImage").src = "https://en.meming.world/images/en/thumb/e/e2/Crying_Cat_screaming.jpg/300px-Crying_Cat_screaming.jpg";
}
else {document.getElementById("firstImage").style.src = "data:image/jpeg;base64,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"> {
}
}}
function saveData() {
if (typeof(Storage) !== "undefined") {
if (localStorage.clickcount) {
localStorage.clickcount = Number(localStorage.clickcount)+1;
} else {
localStorage.clickcount = 1;
}
document.querySelector("p").innerText = "Kitten has been pat: " + localStorage.clickcount + " times in " + time + " seconds";
}
}
const fps = 25;
let image = document.querySelector("img");
let angle = Math.PI / 2;
//store the previous time the animate function last fired
let prevTimeArg;
function animate(currentTimeParam){
if (prevTimeArg != null) {
angle += (currentTimeParam - prevTimeArg) * 0.004;
}
// Setting the previous time to the time the function currently fires
prevTimeArg = currentTimeParam ;
image.style.top = (Math.tan(angle) * 150) + "px";
image.style.left = (Math.tan(angle) * 150) + "px";
image.style.height = (Math.cos(angle) * 1000) + "px";
image.style.width = (Math.cos(angle) * 1000) + "px";
setTimeout(() => {
requestAnimationFrame(currentTime => animate(currentTime));
}, 0 / fps)}
for (i = 0; i < cats.length; i++) {
window.requestAnimationFrame(animate);
}
</script>
</body>
</html>
Thank you in advance..
I'm making a color guessing game in JS. You're given the RGB value of a color, and you're supposed to click one of the three divs with that specific color while the other two have a different color. I've managed to make these three divs have three different random colors; however, I can't figure out how to make one of them have the winning color.
<!DOCTYPE html>
<html lang="en">
<head>
<link rel="stylesheet" href="style.css">
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<h1 class="text-centered">Guess The Color!</h1>
<h2 class="text-centered" id="colorguess"></h2>
<div class="box-container">
<div class="box">
</div>
<div class="box">
</div>
<div class="box">
</div>
</div>
</body>
<script src="script.js"></script>
</html>
*{
box-sizing: border-box;
}
body{
font-family: arial;
background-color: #1c1874;
color: rgb(105, 105, 139);
color: #fff;
}
.text-centered{
text-align: center;
text-shadow: 0px 2px 2px rgba(150, 150, 150, 1);
}
.box-container{
padding: 200px;
align-self: center;
display: flex;
flex-direction: row;
justify-content:space-evenly;
}
.box{
width: 200px;
height: 200px;
border-radius: 20px;
cursor: pointer;
}
function gamestart(){
var r = Math.floor(Math.random() * 256);
var g = Math.floor(Math.random() * 256);
var b = Math.floor(Math.random() * 256);
var rgb = document.getElementById('colorguess');
//here i defined the initial winning color
rgbvaluetrue = "rgb("+r+", "+g+", "+b+")";
rgb.innerHTML = rgbvaluetrue;
var body = document.getElementsByTagName('body');
var box = document.getElementsByClassName('box');
for(var i=0;i<=box.length;i++){
var r,g,b = Math.floor(Math.random() * 256);
rgbvalue = "rgb("+r+", "+g+", "+b+")";
box[i].style.backgroundColor = rgbvalue;
}
//here I am trying to assign the initial rgb value to one of the divs randomly
var rand = Math.floor(Math.random() * 3);
//here I check if the div you clicked on is correct
box[rand].style.backgroundColor = rgbvaluetrue;
for(var i=0;i<=box.length;i++){
box[i].addEventListener("click", function(el) {
if (el.style.backgroundColor == rgbvaluetrue){
h1 = document.getElementsByTagName('h1');
h1.innerHTML = "BRAVO";
}
else{
gamestart();
}
})
}
}
gamestart();
The code for the game is there but there were three of mistakes in it.
I'll go through them one by one:
The two for cycles are run 4 times instead of 3. The termination condition i<=box.length should be replaced by i<box.length.
The addEventListener handler doesn't get the element as an input parameter but the event itself. You can then get the element with the target property like this: event.target.
After this assignment h1 = document.getElementsByTagName('h1'); h1 contains an array with all the h1 elements so you can't assign use h1.innerHTML = "BRAVO"; to assign a content to it. I changed it to display the success text in the same h1 you are using to show the rgb value like this:
h1 = document.getElementById('colorguess');
Lastly, in your code the addEventListener is called every time the game is played.
After the first victory you will have 2 listeners for every box making the game unplayable unless you refresh the entire page. To solve this I moved the listeners registration in a init function that you have to call only once at the start of the first game. (Another way was to remove and then readd the event listener every time)
Here is the complete js code. I didn't touch the html/css parts.
var rgbvaluetrue;
function initGame() {
var box = document.getElementsByClassName('box');
for(var i=0;i<box.length;i++){
box[i].addEventListener("click", checkWinner);
}
}
function gamestart(){
var r = Math.floor(Math.random() * 256);
var g = Math.floor(Math.random() * 256);
var b = Math.floor(Math.random() * 256);
var rgb = document.getElementById('colorguess');
//here i defined the initial winning color
rgbvaluetrue = "rgb("+r+", "+g+", "+b+")";
rgb.innerHTML = rgbvaluetrue;
var body = document.getElementsByTagName('body');
var box = document.getElementsByClassName('box');
for(var i=0;i<box.length;i++){
var r,g,b = Math.floor(Math.random() * 256);
rgbvalue = "rgb("+r+", "+g+", "+b+")";
box[i].style.backgroundColor = rgbvalue;
}
//here I am trying to assign the initial rgb value to one of the divs randomly
var rand = Math.floor(Math.random() * 3);
//here I check if the div you clicked on is correct
box[rand].style.backgroundColor = rgbvaluetrue;
}
function checkWinner(event) {
if (event.target.style.backgroundColor === rgbvaluetrue){
h1 = document.getElementById('colorguess');
h1.innerHTML = "BRAVO";
}
else{
gamestart();
}
}
initGame();
gamestart();
There is a small mistake in the loops:
for(var i=0;i<=box.length;i++){ It goes 4 times, but you have 3 boxes
change to for(var i=0;i<box.length;i++){
There are multiple issues:
for loops are iterating more times than needed
var r, g, b = ... will only assign b. r and g will remain undefined
I refactored the JavaScript and fixed all issues, run the below snippet:
const getRandomColor = () => {
return `rgb(${Math.floor(Math.random() * 256)}, ${Math.floor(Math.random() * 256)}, ${Math.floor(Math.random() * 256)})`;
}
let colorToGuess = '';
const resultContainer = document.querySelector('#result');
const colorToGuessContainer = document.querySelector('#color-to-guess');
const boxes = document.querySelectorAll('.box-container .box');
const startGame = () => {
resultContainer.innerText = "Guess The Color!"
colorToGuess = getRandomColor();
colorToGuessContainer.innerHTML = colorToGuess;
const randomBoxIndex = Math.floor(Math.random() * boxes.length);
boxes.forEach((box, index) => {
box.style.backgroundColor = index === randomBoxIndex ? colorToGuess : getRandomColor();
})
}
boxes.forEach((box) => {
box.addEventListener('click', ({
target
}) => {
if (target.style.backgroundColor === colorToGuess) {
resultContainer.innerText = "You guessed it, click me to play again."
} else {
startGame()
}
})
})
startGame();
resultContainer.addEventListener('click', startGame)
* {
box-sizing: border-box;
}
body {
font-family: arial;
background-color: #1c1874;
color: white;
}
.text-centered {
text-align: center;
text-shadow: 0px 2px 2px rgba(150, 150, 150, 1);
}
.box-container {
padding: 2rem;
display: flex;
align-items: center;
justify-content: center;
}
.box {
width: 200px;
height: 200px;
border-radius: 20px;
cursor: pointer;
}
<h1 class="text-centered" id="result"></h1>
<h2 class="text-centered" id="color-to-guess"></h2>
<div class="box-container">
<div class="box">
</div>
<div class="box">
</div>
<div class="box">
</div>
</div>
There are no errors when ran.
var P1 = document.getElementById("P1");
P1.style.left = "50%";
You need to have a position if you are going to use the left property.
var P1 = document.getElementById("P1");
var pct = 1;
function loop() {
setTimeout(function() {
P1.style.left = ++pct + "%";
loop();
}, 500)
}
loop();
#P1 {
background: black;
height: 10px;
width: 10px;
position: absolute;
}
<div id=P1></div>
I'm trying to move the position of a div element at set intervals however the setInterval method executes once and then stops. setInterval() doesn't update .style.transform repeatedly every 200 milliseconds as intended.
<!DOCTYPE html>
<html>
<head>
<title>Snake game</title>
<style type="text/css">
.container {
width: 500px;
height: 500px;
border: 2px solid black;
}
#snakehead {
width: 5px;
height: 5px;
background: pink;
position: relative;
left: 0px;
}
</style>
<script type="text/javascript" src="snake.js"></script>
</head>
<body>
<div class="container">
<div id="snakehead"></div>
</div>
</body>
</html>
Javascript: Ideally I'd also like to be able to move the snakehead in any direction with vx and vy. Anyway to put those values into .style.transform = translateX()?
function snakepos() {
var x = 0;
var y = 0;
var vx = 1;
var vy = 0;
return {
move: function() {
x += vx;
y += vy;
var snakehead = document.querySelector("#snakehead");
snakedhead.style.left = "5px";
}
};
}
window.onload = function() {
console.log("hi");
var container = document.querySelector(".container");
var snake = snakepos();
setInterval(function() {
snake.move();
}, 200);
}
I know this can be done much easier in jQuery with .css but I'd to how this can be done in vanilla javascript. Thank you in advance.
snakehead.style.left = (snakedhead.style.left + "5px");
or
snakehead.style.left = (snakedhead.style.left - "5px");
I'd recommend something in a style a bit more familiar to me:
function snakepos() {
this.x = 0;
this.y = 0;
this.vx = 1;
this.vy = 1;
this.snakehead = document.querySelector("#snakehead");
var me = this;
this.move = function() {
me.x += me.vx;
me.y += me.vy;
me.snakehead.style.top = me.y + "px";
me.snakehead.style.left = me.x + "px";
};
return this;
}
console.log("hi");
var container = document.querySelector(".container");
var snake = new snakepos();
setInterval(function() {
snake.move();
}, 200);
See fiddle: https://jsfiddle.net/theredhead/td8opb0b/1/
I want to check if server at URL is responding, then set the text of my < p > tag to 'server is online' or 'server is offline'.
I can make a page on my server that returns for ex. 'success' as a plain text. And if my javascript can catch this message it should write 'server is online', else it should try to connect for maximum 5 or more seconds, then write a message 'server is offline'.
I tried the code from this answer, but it turns offline after 1500 ms.
<body onload="Pinger_ping('google.com')">
...
<p id = "status">Checking server status...</p>
...
<script type="text/javascript">
function Pinger_ping(ip, callback) {
if(!this.inUse) {
this.inUse = true;
this.callback = callback
this.ip = ip;
var _that = this;
this.img = new Image();
var status=document.getElementById('status');
this.img.onload = function() {status.innerHTML="online";};
this.img.onerror = function() {status.innerHTML="online";};
this.start = new Date().getTime();
this.img.src = "http://" + ip;
this.timer = setTimeout(function() {status.innerHTML="offline";}, 1500);
}
}
</script>
You may try this solution, here I am using image load event to track the connection status.
(function(win) {
var _ = {};
_.win = win;
_.doc = _.win.document;
_.status = _.doc.createElement('div');
_.status.className = "hide";
_.status.innerHTML = "You are now offline !";
_.doc.getElementsByTagName('body')[0].appendChild(_.status);
_.img = new Image();
_.loop = function() {
_.win.setTimeout(_.nextSrc, 5000);
};
_.onLine = function() {
_.status.className = "hide"; // hide
_.loop();
};
_.offLine = function() {
_.status.className = "net-err"; // show
_.loop();
};
_.img.onload = _.onLine;
_.img.onerror = _.offLine;
_.nextSrc = function() {
_.img.src = "https://raw.githubusercontent.com/arvind-web-corner/offline-status/gh-pages/blank.png?" + _.win.Math.random();
};
_.loop();
})(window);
* {
font-family: Calibri, Arial !important;
}
.net-err {
width: 100%;
display: block;
z-index: 999;
padding: 15px 10px;
background: rgb(255, 9, 9);
color: #fff;
font-weight: bold !important;
text-align: center;
position: fixed;
top: -1px;
left: -1px;
border: 1px solid #ddd;
font-size: 30px;
opacity: 0.9;
filter: alpha(opacity=90);
/* IE */
}
.hide {
display: none;
}
<!DOCTYPE html>
<html>
<head>
<title>Status</title>
</head>
<body>
<h1>This page will be tracking your internet connection</h1>
<h2>You will be notified when you loose connection</h2>
<h3>e.g. Go to File > Work Offline</h3>
</body>
</html>
script, demo