изменение фона с помощью css и javascript

Question

Я застрял в каком-то месте, и я хотел бы узнать ваши идеи о том, как решить эту проблему.

var vaction = "{{vaction}}";

  if(vaction === "Driving")
   document.getElementByClassName("cover").style.backgroundImage = url(https://media.nature.com/lw800/magazine-assets/d41586-018-04158-5/d41586-018-04158-5_15590100.gif);
   document.getElementByClassName("table1, table2").style.backgroundColor = 'lime';
  
  else if(vaction === "Sounding The Alarm")
   document.getElementByClassName("cover").style.backgroundImage= url(https://upload.wikimedia.org/wikipedia/commons/e/eb/Blinking_warning.gif);
   document.getElementByClassName("table1, table2").style.backgroundColor = 'orange';
  
  else if(vaction === "Pulling over")
   document.getElementByClassName("cover").style.backgroundImage = url(https://browsifyapp.com/wp-content/uploads/2018/10/model-3-gif-yeah.gif);
   document.getElementByClassName("table1, table2").style.backgroundColor = 'red';
</script>

<style>
table.table2, table.table1 {
	width: 190.5px;
	height: 50px;
	text-align: left;
	border-collapse: collapse;
}
table.table1, td, th, table.table2 td, th {
	border: 1px solid black;
}
html , body {
    height: 100%;
	margin: 0;
	padding: 0;
}
div.cover {
  background-repeat: no-repeat;
  background-size: cover;
  background-position: center;
  width: 100%;
  height: 100%;
}
</style>

<div class="cover"> 
  <div>
    <table class="table1">
    <thead><tr><th>Focus</th><th>State</th><th>Alert Level</th></tr></thead>
    <tr><td>Eyes</td><td> {{estate}} </td><td> {{elevel}} </td></tr> 
    <tr><td>Head</td><td> {{hstate}} </td><td> {{hlevel}} </td></tr>
    <tr><td>Body</td><td> {{bstate}} </td><td> {{blevel}} </td></tr>
    <tr><td>Vehicle</td><td> {{vstate}} </td><td> {{vlevel}} </td></tr>
    </table>

    <table class="table2">
    <thead><tr><th>Current action</th></tr></thead>
    <tr><td> {{vaction}} </td></tr>
    </table>
  </div>
</div>

Идея заключается в том, что я хочу изменить фоновый рисунок и table1, table2 цвет фона в соответствии с переменным ответом. Эти входные данные собираются из хлопьев. Я просто не знаю, как это сделать.

Answer 1

if(!NodeList.prototype.forEach) // document.querySelectorAll('...').forEach not supported in IE for support add this :D
    NodeList.prototype.forEach = function(that){
        for(var i = 0; i < this.length; i++)
           that(this[i]);
    };
function change(gif_url, tb1_tb2_color) {
  document.querySelector("div.cover").style.backgroundImage = gif_url;
  document.querySelectorAll(".table1, .table2").forEach(function(tb) {
    tb.style.background = tb1_tb2_color;
  });
}
switch("{{vaction}}") {
  case "Driving":
    change("url(https://media.nature.com/lw800/magazine-assets/d41586-018-04158-5/d41586-018-04158-5_15590100.gif)", "lime");
  break;
  case "Sounding The Alarm":
    change("url(https://upload.wikimedia.org/wikipedia/commons/e/eb/Blinking_warning.gif)", "orange");
  break;
  case "Pulling over":
    change("url(https://browsifyapp.com/wp-content/uploads/2018/10/model-3-gif-yeah.gif)", "red");
  break;
}