Change div background image with JavaScript

Question

I have a button that when clicked should change its value, a gif image, and a div background at the same time. I have the value change and gif change working well.

However I'm having trouble changing the div background image. I thought that the code I have below would work, but the carousel__cell change just doesn't change.

I also copied a line of HTML that it would apply to so that you can see the gif is in a completely different div than the carousel__cell. I'm not sure if that is the reason, but I don't know what else to try.

function updateButton(btn, bk, i) {
  var front = "../../../.img/sprites/gif-sprites/gen1/";
  var temp = "unknown";
  var end = document.getElementsByClassName("gif")[i].src;
  var length = 9;
  var endT = end.substring(end.length - length);
  if (btn.value === 'U') {
    btn.value = 'S';
    temp = "seen";
    document.getElementsByClassName("carousel__cell").src = "../../../.img/pokedex/seen.png";
    document.getElementsByClassName("gif")[i].src = front + temp + endT;
  } else {
    if (btn.value === 'S') {
      btn.value = 'C';
      temp = "caught";
      document.getElementsByClassName("carousel__cell").src = "../../../.img/pokedex/caught.png";
      document.getElementsByClassName("gif")[i].src = front + temp + endT;
    } else {
      if (btn.value === 'C') {
        btn.value = 'U';
        temp = "unknown";
        document.getElementsByClassName("carousel__cell").src = "../../../.img/pokedex/unknown.png";
        document.getElementsByClassName("gif")[i].src = front + temp + endT;
      }
    }
  }
}

const back = document.querySelectorAll('carousel__cell');
const inputs = document.querySelectorAll('input');
for (let i = 0; i < inputs.length; i++) {
  inputs[i].addEventListener('click', () => updateButton(inputs[i], back[i], i));
}

<div class="slideshow-container">
  <div class="mySlides"><img class="gif" src="../../../.img/sprites/gif-sprites/gen1/unknown/0001.gif" alt="" onClick="location.href='../../dexentries/0001.html'"></div>
</div>
<div class="carousel">
  <div class="carousel__scene">
    <ol class="carousel__list">
      <li class="carousel__cell"><input type="button" value="U"><img class="sprite" src="../../../.img/sprites/game-sprites/gen1/0001.png" alt="" /><span class="pkmname">Bulbasaur</span></li>
    </ol>
  </div>
</div>

As a side note, if you need to nest so many `if/else-statements` within each other then you doing something wrong. You should not do that especially as it harms the reading and is hard to understand that logic. Consider a `switch-statement`! — tacoshy, Aug 29 '22 at 14:03
your `carousel_cell` element is a list item `li` therefore it has no `src` attribute. — adampweb, Aug 29 '22 at 14:04
Does this answer your question? [What do querySelectorAll and getElementsBy\* methods return?](https://stackoverflow.com/questions/10693845/what-do-queryselectorall-and-getelementsby-methods-return) — Heretic Monkey, Aug 29 '22 at 14:19
To answer the title question, there are many duplicates; here's one: [How to change css background-image on click?](https://stackoverflow.com/q/24460031/215552) — Heretic Monkey, Aug 29 '22 at 14:25

score 0 · Answer 1 · answered Aug 30 '22 at 16:00

I was actually able to figure this out after looking a little more. I was able to use jquery to add and remove classes.

$('input').on({
  click: function() {
    if ($('li.selected input:button').val() == 'S') {
      $('li.selected').addClass('seen').removeClass('caught').removeClass('unknown')
    }
    if ($('li.selected input:button').val() == 'C') {
      $('li.selected').addClass('caught').removeClass('unknown').removeClass('seen')
    }
    if ($('li.selected input:button').val() == 'U') {
      $('li.selected').addClass('unknown').removeClass('seen').removeClass('caught')
    }
  }
})

Change div background image with JavaScript

1 Answers1