Trying to change animations based on which color btn is clicked

user_15402482 0
Viewed 39

I am using bootstrap radio buttons

When one of these is selected I would like my animation to change.

I need to figure out how to change through the colors here is what I have so far in JS. I tried using a for each loop but keep getting is not a function or undefined errors when trying to get one color to display.

const showcase = document.querySelector('.showcase');
const black = document.querySelector('#black');
const white = document.querySelector('#white');
const grey = document.querySelector('#grey');
const yellow = document.querySelector('#yellow');
const colorChoice = document.getElementById



let colors = [colorChoice];
console.log(colors);

// load events
loadEventListeners();
// size and color events
function loadEventListeners() {
  color.addEventListener('click', colorChange);
}




// color change


function colorChange(e) {
  colors.forEach(function(color) {

    if (color = black) {
      console.log(color)
      console.log('black')
      showcase.style.animation = 'blackjacket 6s infinite';
      showcase.style.animationTimingFunction = 'steps(1, end)';

    } else if (color = white) {

      console.log('white')
      showcase.style.animation = 'whitejacket 6s infinite';
      showcase.style.animationTimingFunction = 'steps(1, end)';
    } else if (color = grey) {
      console.log('grey')
      showcase.style.animation = 'greyjacket 6s infinite';
      showcase.style.animationTimingFunction = 'steps(1, end)';
    } else if (color = yellow) {
      console.log('yellow')
      showcase.style.animation = 'yellowjacket 6s infinite';
      showcase.style.animationTimingFunction = 'steps(1, end)';
    } else {}

    e.preventDefault();
  });


}
.showcase {
  width: 764px;
  height: 875px;
  margin: auto;
  background-size: contain;
  background-position: 50% 50%;
  background-repeat: no-repeat;
  -webkit-animation: blackjacket 6s infinite;
  animation: blackjacket 6s infinite;
  -webkit-animation-timing-function: steps(1, end);
  animation-timing-function: steps(1, end);
}

@keyframes blackjacket {
  /* black */
  0% {
    background-image: url('https://connorlewis128.github.io/ShoppingPage/Dist/images/new%20product/black%20jacket/front.webp')
  }
  33.3% {
    background-image: url('https://connorlewis128.github.io/ShoppingPage/Dist/images/new%20product/black%20jacket/back.webp');
  }
  66.6% {
    background-image: url('https://connorlewis128.github.io/ShoppingPage/Dist/images/new%20product/black%20jacket/side.webp');
  }
  100% {
    background-image: url('https://connorlewis128.github.io/ShoppingPage/Dist/images/new%20product/black%20jacket/side.webp');
  }
}

@keyframes whitejacket {
  /* white */
  0% {
    background-image: url('https://connorlewis128.github.io/ShoppingPage/Dist/images/new%20product/white%20jacket/front.webp')
  }
  33.3% {
    background-image: url('https://connorlewis128.github.io/ShoppingPage/Dist/images/new%20product/white%20jacket/back.webp');
  }
  66.6% {
    background-image: url('https://connorlewis128.github.io/ShoppingPage/Dist/images/new%20product/white%20jacket/side.webp');
  }
  100% {
    background-image: url('https://connorlewis128.github.io/ShoppingPage/Dist/images/new%20product/white%20jacket/side.webp');
  }
}

@keyframes greyjacket {
  /* grey */
  0% {
    background-image: url('https://connorlewis128.github.io/ShoppingPage/Dist/images/new%20product/grey%20jacket/front.webp')
  }
  33.3% {
    background-image: url('https://connorlewis128.github.io/ShoppingPage/Dist/images/new%20product/grey%20jacket/back.webp');
  }
  66.6% {
    background-image: url('https://connorlewis128.github.io/ShoppingPage/Dist/images/new%20product/grey%20jacket/side.webp');
  }
  100% {
    background-image: url('https://connorlewis128.github.io/ShoppingPage/Dist/images/new%20product/grey%20jacket/side.webp');
  }
}

@keyframes yellowjacket {
  /* yellow*/
  0% {
    background-image: url('https://connorlewis128.github.io/ShoppingPage/Dist/images/new%20product/yellow%20jacket/front.webp')
  }
  33.3% {
    background-image: url('https://connorlewis128.github.io/ShoppingPage/Dist/images/new%20product/yellow%20jacket/back.webp');
  }
  66.6% {
    background-image: url('https://connorlewis128.github.io/ShoppingPage/Dist/images/new%20product/yellow%20jacket/side.webp');
  }
  100% {
    background-image: url('https://connorlewis128.github.io/ShoppingPage/Dist/images/new%20product/yellow%20jacket/side.webp');
  }
}
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">


<div class="colorchoice">
  <h2>Choose Color</h2>
  <div id="color">

    <div class="btn-group2" role="group2" aria-label="Basic radio toggle button group">
      <input type="radio" class="btn-check" name="colorradio" id="black" autocomplete="off">
      <label class="btn btn-secondary black" for="black"></label>

      <input type="radio" class="btn-check" name="colorradio" id="white" autocomplete="off">
      <label class="btn btn-secondary white" for="white"></label>

      <input type="radio" class="btn-check" name="colorradio" id="grey" autocomplete="off">
      <label class="btn btn-secondary grey" for="grey"></label>
      <input type="radio" class="btn-check" name="colorradio" id="yellow" autocomplete="off">
      <label class="btn btn-secondary yellow" for="yellow"></label>
    </div>

bootstrap-4 css html javascript
1 Answers

Explanation below but here's a working CodePen: https://codepen.io/STRINIX/pen/YzNzwyo

First of all, you need some kind of event that starts the change process. It could be a loop but an event is a much cleaner way. Since you're using radio buttons you could use the onClick event, you'll also need to add a value:

<input type="radio" class="btn-check" name="colorradio" id="black" autocomplete="off" onClick="colorChange()" value="blackjacket">
<label class="btn btn-secondary black" for="black"></label>

<input type="radio" class="btn-check" name="colorradio" id="white" autocomplete="off" onClick="colorChange()" value="whitejacket">
<label class="btn btn-secondary white" for="white"></label>

etc.

Your javascript function will look like this:

function colorChange() {
    showcase.style.animation = document.querySelector('input[name="colorradio"]:checked').value + ' 6s infinite';
}

The queryselector selects your radio button based on the name and check status, then gets it's value.

You're also using a single equal sign (=) in your if statements, that's a syntax error. It should either be two or three equal signs.

user_48672990
Related