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
– tacoshy, Commented Aug 29, 2022 at 14:03
your carousel_cell element is a list item li therefore it has no src attribute. — adampweb
– adampweb, Commented Aug 29, 2022 at 14:04
Does this answer your question? What do querySelectorAll and getElementsBy* methods return? — Heretic Monkey
– Heretic Monkey, Commented Aug 29, 2022 at 14:19
To answer the title question, there are many duplicates; here's one: How to change css background-image on click? — Heretic Monkey
– Heretic Monkey, Commented Aug 29, 2022 at 14:25

GamingLegion · Accepted Answer · 2022-08-30 16:00:46Z

0

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')
    }
  }
})

answered Aug 30, 2022 at 16:00

GamingLegion

234 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

Change div background image with JavaScript

1 Answer 1

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related