Menu
I enclose the code I made. In the table there are three columns, the first reserved for the links to visit, the second reserved for the time that must pass before the next visit, the third reserved for the countdown. Then by clicking on the link in col.1 you should be redirected to the corresponding web page (in a new tab) while, at the same time, a countdown starts which takes the time indicated in col.2 and shows it in col.3 (expressed in hh : mm: ss); when it reaches 0, the word “ready” should appear, but it is also okay that it remains at 0.
Currently, when you click on the link, two new tabs open, one on the site indicated and the other at blank. The countdown starts, but I can’t get it to take the time indicated in col. 2 as a start. This all works for the first line only.
I would like some help fixing the script so that:
1) clicking on the link opens only one tab (the right one) and not two.
2) the countdown is able to take the initial value from the central column, as I said before.
3) this mechanism works for all links on the page (which will be many).
Thanks in advance.
[code]<!DOCTYPE html>
<html>
<head>
<style type=”text/css”>
body {
background-color:#7B68EE;
font-family: “Arial Rounded MT”,”Liberation Serif”, “School Times”,”Times New Roman”;
color:black;
font-weight:200;
font-size:110%
}
.centered table {
margin: 0 auto;
}
table {
width: 750px;
border: 4px solid #000000;
border-collapse: collapse
}
td {
width: 250px;
height: 40px;
border:1px solid black;
padding: .1em
}
td:nth-child(2) {
text-align:center
}
td:nth-child(3) {
text-align:center
}
a:link{
color:black;
text-decoration:none;
font-weight:bolder
}
a:visited {
color: black;
text-decoration:none;
}
a:hover {
color: red;
text-decoration:blink
}
a:active{
color: green;
text-decoration:underline
}
</style>
<script src=”/scripts/snippet-javascript-console.min.js?v=1″></script>
</head>
<body>
<table>
<tbody>
<tr>
<th>site
</th>
<th>timer (hh:mm:ss)
</th>
<th>countdown then ready
</th>
</tr>
<tr>
<td>
<a href=”http://www.google.com” id=”url” onclick=”startTimer()” target=”_blank”>
Google
</a>
</td>
<td>
01:30:<span id=”time”></span>
</td>
<td>
<span id=”countdown”></span>
</td>
</tr>
<tr>
<td>
<a href=”http://www.apple.com” id=”url” onclick=”startTimer()” target=”_blank”>
Apple
</a>
</td>
<td>
01:30:<span id=”time”></span>
</td>
<td>
<span id=”countdown”></span>
</td>
</tr>
<tr>
<td>
<a href=”http://www.microsoft.com” id=”url” onclick=”startTimer()” target=”_blank”>
Microsoft
</a>
</td>
<td>
12:01:30:<span id=”time”></span>
</td>
<td>
<span id=”countdown”></span>
</td>
</tr>
</tbody>
</table>
<script type=”text/javascript”>
$ = (id) => { return document.getElementById(id) }
let secs = 30,
link = $(‘url’),
time = $(‘time’),
count = $(‘countdown’);
time.innerHTML = secs;
count.innerHTML = secs;
startTimer = () => {
window.open(url.href, ‘_blank’);
let tiks = setInterval(countdown, 1000);
link.style.color = ‘red’;
count.style.color = ‘red’;
function countdown() {
if (secs == -1) {
clearInterval(tiks)
link.style.color = ‘green’;
time.style.color = ‘green’;
count.style.color = ‘green’;
} else {
count.innerHTML = secs;
secs–;
}
}
}
</script>
</body>
</html>