dimanche 24 mars 2019

How can I get a random animated image in b.html when button in a.html is clicked?

I'm making a website where a pizza can be personalized. When the button "Deliver pizza" is clicked, the user get redirected to a new html where an animation will be played that lets them know the pizza is on the way.

What I have now just keeps playing the same animation instead of a random one everytime.

Html where the animation will be played: (playAnimation.html)

<img src="img/pizzadeliverer1.png" alt="pizza deliverer" id='pizzaDeliverer' class="letTheDelivererDrive">

CSS:

.letTheDelivererDrive {
visibility: visible;
animation: animationFrames ease-in-out 4s;
animation-iteration-count: infinite;
transform-origin: 50% 50%;
animation-fill-mode: forwards;
/*when the spec is finished*/
-webkit-animation: animationFrames ease-in-out 7s;
-webkit-animation-iteration-count: infinite;
-webkit-transform-origin: 50% 50%;
-webkit-animation-fill-mode: forwards;
/*Chrome 16+, Safari 4+*/
-moz-animation: animationFrames ease-in-out 4s;
-moz-animation-iteration-count: infinite;
-moz-transform-origin: 50% 50%;
-moz-animation-fill-mode: forwards;
/*FF 5+*/
-o-animation: animationFrames ease-in-out 4s;
-o-animation-iteration-count: infinite;
-o-transform-origin: 50% 50%;
-o-animation-fill-mode: forwards;
/*Not implemented yet*/
-ms-animation: animationFrames ease-in-out 4s;
-ms-animation-iteration-count: infinite;
-ms-transform-origin: 50% 50%;
-ms-animation-fill-mode: forwards;
/*IE 10+*/

}

JS:

    function changeHTML() {
        if (deliverPizzaButton.classList.contains('readyToDeliver')) { // if every step is filled in
            window.location.href = 'playAnimation.html'; // 
        }
    }


    var pizzaDeliverGuys = ["img/pizzadeliverer1.png", "img/pizzadeliverer2.png", "img/pizzadeliverer3.png"];


    function playAnimation() {
        var chosenDeliveryGuy = Math.floor((Math.random() * pizzaDeliverGuys.length));
chosenDeliveryGuy.classlist.add('letTheDelivererDrive');
    }


    deliverPizzaButton.addEventListener('click', changeHTML, playAnimation); // this button is on the index.html


    if (window.location.href == 'playAnimation.html') {
        playAnimation();
    }




Aucun commentaire:

Enregistrer un commentaire