We Keep Coding

Old JavaScript no longer working. Chrome says Event.path is deprecated, but I don't use Event.path in my code

I built a game of concentration over a year ago. I tried to run it today and when you click on the back of a "card" it's supposed to reveal a picture, but it does not. Chrome dev tools says "Event.path is deprecated and will be removed. Please use Event.composedPath() instead."
Nowhere in my code do I use Event.path and I can't seem to figure out what specifically is broken.
Here is the code I do have for a click event. The first function is repeated for all 24 cards and calls the second function which is supposed to reveal the picture "underneath" the back of the card and if both revealed pictures are the same they remain revealed, otherwise they both get reset to show the back of the card.
//onClick functions for all card images
pic1.onclick = () => {
console.log(revealedPics); //this sends the file link of the revealed picture to the console
if (isClicked(pic1) === false) {
pic1.src = picArray[0];
checkIfMatch(pic1);
} else if (trackRevealedCardsArray.includes(pic1.src) === true) {
return;
} else {
pic1.src = backOfCard;
}
console.log(revealedPics);
}
//Check if two revealed images are a match
const checkIfMatch = (pic) => {
if (revealedPics === 1) {
firstPic = pic;
} else if (revealedPics === 2) {
secondPic = pic;
if (firstPic.src === secondPic.src) {
revealedPics = 0;
totalPairs--;
trackRevealedCardsArray.push(firstPic.src);
console.log(`total pairs ${totalPairs}`);
if (totalPairs === 0) {
window.setTimeout(gameOver, 500);
}
} else {
window.setTimeout(function() {
firstPic.src = backOfCard;
secondPic.src = backOfCard;
}, 800);
window.setTimeout(resetRevealedPics, 800);
}
}
}
I've checked to make sure all my paths are correct and they are. When I run the same html files from my local drive it works perfectly.

How to get check if a page gets reloaded with js

How do you now check if a page gets reloaded?
It used to be like this:
//check for Navigation Timing API support
if (window.performance) {
console.info("window.performance works fine on this browser");
}
console.info(performance.navigation.type);
if (performance.navigation.type == performance.navigation.TYPE_RELOAD) {
console.info( "This page is reloaded" );
} else {
console.info( "This page is not reloaded");
}
But now I found out that navigation type is deprecated:
https://developer.mozilla.org/en-US/docs/Web/API/Performance/navigation
So then I checked the replacement: https://developer.mozilla.org/en-US/docs/Web/API/PerformanceNavigationTiming
Even after reading it it's still not very clear on how I could accomplish this. So how does the new way work of checking if a page gets refreshed?
I also tried this after I had read it:
if (PerformanceNavigationTiming.type == "reload") {
alert('page reloaded')
}
But then the alert won't be displayed.
And after that I tried this:
if (PerformanceNavigationTiming.type == PerformanceNavigationTiming.TYPE_RELOAD) {
alert('page reloaded')
}
But then It would display the alert also without a page refresh.
Then the last thing I tried:
const pageAccessedByReload = (
(PerformanceNavigationTiming && PerformanceNavigationTiming.TYPE === 1) ||
window.performance
.getEntriesByType('navigation')
.map((nav) => nav.type)
.includes('reload')
);
alert(pageAccessedByReload);
But this also gives me an alert either false when it's not reloaded and true when it is reloaded. And I only want that alert when the page is reloaded.

You must remember to always pay attention when reading a new API docs, type in PerformanceNavigationTiming is a string and not a number so the correct way would be:
if (window.PerformanceNavigationTiming) {
console.info("window.performance works fine on this browser");
if (PerformanceNavigationTiming.type === "reload") {
console.info("This page is reloaded");
} else {
console.info("This page is not reloaded");
}
}

From MDN reference 2022: Navigation Timing Level 2 specification
const navigationType =
(window.performance.getEntriesByType('navigation')
[0] as PerformanceNavigationTiming).type;
const isPageReload = navigationType === 'reload';
const isNavigation = navigationType === 'navigate';
const isBackForwarad = navigationType === 'back_forward';
const isPrerender = navigationType === 'prerender';

I have finally found a solution:
const pageAccessedByReload = (
(PerformanceNavigationTiming && PerformanceNavigationTiming.TYPE === 1) ||
window.performance
.getEntriesByType('navigation')
.map((nav) => nav.type)
.includes('reload')
);
if (pageAccessedByReload == true) {
alert(pageAccessedByReload);
}
Now it will only show when the page is refreshed.

Keep Javascript running after reload on chrome console

So, I want to check every 15 sec on some website if some words have been deleted.
I have done this:
window.setInterval(myFunction, 15000)
function myFunction()
{
//Check that "words" are not on web anymore
if ((document.documentElement.textContent || document.documentElement.innerText).indexOf('words') > -1)
{
alert("They still here");
}
else
{
alert("They are gone");
}
location.reload();
}
But becaue of the location.reload(); they script can only run once.
What do I do?

call timer in window.load and remove reloading of location.
window.onload = function() {window.setInterval(myFunction, 15000)};
function myFunction()
{
//Check that "words" are not on web anymore
if ((document.documentElement.textContent || document.documentElement.innerText).indexOf('words') < -1)
{
alert("They are gone");
}
}

I think tampermonkey is what you are looking for https://chrome.google.com/webstore/detail/tampermonkey/dhdgffkkebhmkfjojejmpbldmpobfkfo

javascript different behavior

I have two ASP.NET programs, one of them is in VS2010 (a web project with one DLL) and .NET 4, it works really great, but another project (VS2008, a web site with a lot of DLLs!) has some problem in running javascript codes (of course these JS codes work fine in VS2010 app), I use some functions for changing images (onmouseclick) and image fade, but there is almost no reaction in VS2008 project, of course JS is located in a content page in VS2008, can it be a possible cause? (I've tested an alert function in VS2008 JS functions and the alert function works, so I think JS function are executed but perhaps there are some other errors)
it is my JS function for changing images:
<asp:Content ID="ContentMain" ContentPlaceHolderID="CPHMain" Runat="Server">
<script type="text/javascript" >
function shownextimage() {
if (document.getElementById('imgBanner').src.toString().indexOf("1") != -1) {
document.getElementById('imgBanner').src = 'Images/2.jpg';
document.getElementById('lblNextImage').innerHTML = "2/5";
}
else if (document.getElementById('imgBanner').src.toString().indexOf("2") != -1) {
document.getElementById('imgBanner').src = 'Images/3.jpg';
document.getElementById('lblNextImage').innerHTML = "3/5";
}
else if (document.getElementById('imgBanner').src.toString().indexOf("3") != -1) {
document.getElementById('imgBanner').src = 'Images/4.jpg';
document.getElementById('lblNextImage').innerHTML = "4/5";
}
else if (document.getElementById('imgBanner').src.toString().indexOf("4") != -1) {
document.getElementById('imgBanner').src = 'Images/5.jpg';
document.getElementById('lblNextImage').innerHTML = "5/5";
}
else if (document.getElementById('imgBanner').src.toString().indexOf("5") != -1) {
document.getElementById('imgBanner').src = 'Images/1.jpg';
document.getElementById('lblNextImage').innerHTML = "1/5";
}
//var element = document.getElementById('id');
//var opa = 1.0;
//document.getElementById('imgBanner').style.opacity = opa;
// IE fallback
//document.getElementById('imgBanner').style.filter = 'alpha(opacity='+opa*100+')';
}
should I also write my fade function? They work smoothly in VS2010 but there is no luck in VS2008!
thanks

How do i put a count down timer on my webpage

I want a count down timer of 60 seconds after which the page refreshes
edit: i need a visible count down on the webpage. but obviously the page cant refresh each second for the timer to change

Here is a simple recursive countdown function:
function countdown(time,endcallback,stepcallback)
{
if (time == 0) endcallback();
else {
time--;
stepcallback(time);
window.setTimeout(function() {
countdown(time,callback);
},1000);
}
}
countdown(60,function() {
window.location.reload();
},function(time) {
// display counter on page or do something else
});
EDIT: a bit more sexy this way :)

Is using <META HTTP-EQUIV="refresh" CONTENT="60"/> in the <head> section of your html document sufficient? You can read more about it here

Use a meta refresh: http://en.wikipedia.org/wiki/Meta_refresh
Be warned that this is a bit of a hacky method, and there is probably a more elegant solution, depending on what you are trying to achieve.

<div id='countdown'>60</div>
$(function() {
var cd = $('#countdown');
var c = parseInt(cd.text(),10);
var interv = setInterval(function() {
c--;
cd.html(c);
if (c == 0) {
window.location.reload(false);
clearInterval(interv);
}
}, 1000);
});
sorry didn't notice you need a visible counter at first time.. so i edited answer
working demo

Use the following code:
http://javascript.internet.com/time-date/countdown-timer.html
You only need to modify the following
if((mins == 0) && (secs == 0)) {
window.alert("Time is up. Press OK to continue."); // change timeout message as required
// window.location = "yourpage.htm" // redirects to specified page once timer ends and ok button is pressed
}
to something like:
if((mins == 0) && (secs == 0)) {
window.location.reload();
}