is it possible to refer to a javascript array value to set a background in css?
i have a table with several cells, and i want the css to take the third value in the array and make it the background, but i cant get it to work, the idea is that whatever value is in the third array "logo.png" will be set as the data-title image.
https://gyazo.com/492a81f25533a73e37f75850c02f55e5 Like this!
var arr = [
// Date...................Link..............Title
['Dec 18, 2020 01:00:00', 'TEXT', 'TEXT', 'image.png'], //** these "image.png" are the ones i want to be added to the css above**//
['Dec 18, 2020 01:00:00', 'TEXT', 'TEXT', 'image2.png'],
['Dec 18, 2020 01:00:00', 'TEXT', 'TEXT', 'image3.png'],
['Dec 18, 2020 01:00:00', 'TEXT', 'TEXT', 'image4.png'],
['Dec 18, 2020 01:00:00', 'TEXT', 'TEXT', 'image5.png'],
['Dec 18, 2020 01:00:00', 'TEXT', 'TEXT', 'image6.png'],
['Dec 18, 2020 01:00:00', 'TEXT', 'TEXT', 'image7.png'],
['Dec 18, 2020 01:00:00', 'TEXT', 'TEXT', 'image8.png'],
['Dec 18, 2020 01:00:00', 'TEXT', 'TEXT', 'image9.png'],
['Dec 18, 2020 01:00:00', 'TEXT', 'TEXT', 'image10.png'],
['Dec 18, 2020 01:00:00', 'TEXT', 'TEXT', 'image11.png'],
];
// Remove after 5min
var remAft = 10;
// Get element with ID "timer"
var wrap = document.querySelector('#timer tbody');
// For loop Array "arr"
for (var i = 0; i < arr.length; i++) {
if (checkDate(arr[i][0])) {
// Adds the elements of the table with filled in information
wrap.innerHTML += '<tr><td><a href="' + arr[i][1] + '"' + 'data-title="' + '">' + arr[i][2] + '</a></td><td id="' + 'demo' + (i + 1) + '"></td></tr>'
// Invokes the function by passing as arguments Date and ID
new myTimers(arr[i][0], 'demo' + (i + 1));
}
}
function checkDate(tim) {
var d = new Date(tim);
var countDownDate = d.setTime(d.getTime() + d.getTimezoneOffset() * 60 * 1000);
var now = new Date().getTime();
var distance = countDownDate - now;
if (distance > -60 * 1000 * remAft) {
return true;
} else {
return false;
}
}
function myTimers(tim, ele) {
// Set the date we're counting down to
var d = new Date(tim);
var countDownDate = d.setTime(d.getTime() + d.getTimezoneOffset() * 60 * 1000);
// Update the count down every 1 second
var x = setInterval(function() {
// Get today's date and time
var now = new Date().getTime();
// Find the distance between now and the count down date
var distance = countDownDate - now;
// Time calculations for days, hours, minutes and seconds
var days = Math.floor(distance / (1000 * 60 * 60 * 24));
var hours = Math.floor((distance % (1000 * 60 * 60 * 24)) / (1000 * 60 * 60));
var minutes = Math.floor((distance % (1000 * 60 * 60)) / (1000 * 60));
var seconds = Math.floor((distance % (1000 * 60)) / 1000);
// Display the result in the element with id="demo"
document.getElementById(ele).innerHTML = days + "d " + hours + "h " +
minutes + "m " + seconds + "s ";
// If the count down is finished, write some text
if (distance < 0) {
if (distance > -60 * 1000 * remAft) {
document.getElementById(ele).innerHTML = "DONE";
document.getElementById(ele).classList.add('dropped');
document.getElementById(ele).style.color = 'tomato';
document.getElementById(ele).style.textDecoration = "line-through";
} else {
clearInterval(x);
var chekEl = document.getElementById(ele);
if (chekEl) {
chekEl.parentElement.remove();
}
}
}
// If days is 0 add class 'endsoon'
if (days === 0) {
document.getElementById(ele).classList.add('endsoon');
}
}, 1000);
}
.dropdown {
width: 600px;
padding: 0px;
padding-top: 100px;
padding-bottom: 150px;
}
table {
border-width: 70px;
border-color: black;
background-color: #DCF5F1;
}
.dropdown {
margin: auto;
}
th {
border: 2px solid black;
}
td {
border: 2px groove black;
}
a {
text-decoration: none;
color: black;
}
a:hover {
color: grey;
text-decoration: underline;
}
table {
width: 600px;
table-layout: fixed;
font-size: 20px;
}
table td {
padding: 20px;
font-weight: bold;
font-family: arial;
}
#timer .endsoon {
color: red;
}
[data-title]:hover:after {
opacity: 1;
transition: all 0.5s ease 0.5s;
visibility: visible;
}
[data-title]:after {
content: attr(data-title);
background-color: #f4c2sc2;
background-image: url(arr[3]); /* HERES THE BACKGROUND-IMAGE Line */
font-size: 20px;
position: absolute;
padding: 20px 5px 2px 5px;
left: -130px;
top: -35px;
height: 60px;
width: 80px;
white-space: nowrap;
opacity: 0;
z-index: 99999;
visibility: hidden;
}
[data-title] {
position: relative;
}
<div class="dropdown">
<table id="timer">
<tbody>
<tr>
<td class="headtext">TITLE</td>
<td class="headtext">TITLE</td>
</tr>
</tbody>
</table>
</div>