Change background image url based on javascript array

Viewed 214

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>

1 Answers

Unfortunately you can't use attr for the background-image yet, therefor you have to go for a bit more ugly way using css variables.

create a css variable for example lets call it --title-bg and set its value for each item style="--title-bg: url('+arr[i][3]+')"

wrap.innerHTML += '<tr><td><a href="' + arr[i][1] + '" style="--title-bg: url('+arr[i][3]+')" ' + 'data-title="' + '">' + arr[i][2] + '</a></td><td id="' + 'demo' + (i + 1) + '"></td></tr>'

in the css set the background image to be that variable

[data-title]:after {
  ...
  background-image: var(--title-bg);
  ...
}

you can go for a js solution but I think this one is a bit nicer

Related