Making an image spin with css and jQuery

Question

I'm trying to make a roulette wheel spin when clicking a button, but I can't seem to pass the random number generated from my js file to css

JS

function roulette_spin(btn){
var rand = Math.floor(Math.random() * 720) + 540;

$('.roulette_wheel').css('transform','rotate('+rand+'deg)');
}

HTML

<body>
<div class="roulette_wheel" style="z-index: 0;">
    <img src="ayy.jpg" width="500px" height="500px" />
    <button value="spin" onclick="roulette_spin(this)">SPIN</button>
</div>

[Make a picture rotate continously](https://stackoverflow.com/questions/10123700/how-to-make-a-picture-rotate-continuously) — FortyTwo, Feb 26 '19 at 13:41
When I click the button the image gets rotated. [fiddle](https://jsfiddle.net/r63g90zq/) — James, Feb 26 '19 at 13:45
this code is work properly in my machine...so, where you get the error..please can you tell it...? — MK Patel, Feb 26 '19 at 14:16

Vincent G · Answer 1 · 2019-02-26T13:59:38.000

1

Here is a working example with some updates to your code.

Like @H.Figueiredo suggests, I've changed the rotation selector to the img to avoid the rotation of the button.

HTML

<div class="roulette_wheel" style="z-index: 0;">
    <img src="https://picsum.photos/200/300" width="500px" height="500px" />
    <button class="spin" value="spin">SPIN</button>
</div>

CSS

function roulette_spin(btn){    
    var rand = Math.floor(Math.random() * 720) + 540;

    $('.roulette_wheel img').css('transform','rotate('+rand+'deg)');
}


$('.spin').click(function(){
    roulette_spin($(this).siblings('img'));
});

See this fiddle

edited Feb 26 '19 at 13:59

answered Feb 26 '19 at 13:43

Vincent G

8,547
1
18
36

https://stackoverflow.com/questions/45867078/onclick-for-button-not-calling-function – Stefan Bols Feb 26 '19 at 13:48
I think this is the correct answer honestly, but I would change the rotate to the img instead of the div, since you'll also be rotating the button inside the div. And you even send the function the img object, so it seemed to me that was what you intended. Just a small suggestion. – H. Figueiredo Feb 26 '19 at 13:49

score 0 · Answer 2 · answered Feb 26 '19 at 13:47

Try this:

<html>
<body>
<div class="roulette_wheel" style="z-index: 0;">
    <img src="ayy.jpg" width="500px" height="500px" />
    <button value="spin" onclick="roulette_spin()">SPIN</button>
</div>

<script>
    function roulette_spin(){
        var rand = Math.floor(Math.random() * 720) + 540;
        document.querySelector('.roulette_wheel').style.transform = 'rotate('+rand+'deg)';
    }
</script>

</body>
</html>

score 0 · Accepted Answer · answered Feb 26 '19 at 14:26

0

I'd say the roulette_wheel class is not assigned to the proper element, the image. Besides setting the rotate transform won't make the wheel spin, but will just change its rotation angle once (and here without any transition).

Below you will find a working example of assigning a transform style in an animation process.

JQuery calls were replaced by vanilla selectors (getElementsByClassName, getElementById) and style object manipulation instead of JQuery's css method.

Also, look into documentation for requestAnimationFrame

(OK I was a little bored here :) )

var force = 0;
var angle = 0;
var inertia = 0.985;
var minForce = 15;
var randForce = 15;
var rouletteElem = document.getElementsByClassName('roulette_wheel')[0];
var scoreElem = document.getElementById('score');

var values = [
  0,27,10,25,29,12,8,19,31,18,6,21,33,16,4,
  23,35,14,2,0,28,9,26,30,11,7,20,32,17,5,
  22,34,15,3,24,36,16,1
].reverse();

function roulette_spin(btn){
  // set initial force randomly
  force = Math.floor(Math.random() * randForce) + minForce;
  requestAnimationFrame(doAnimation);
}

function doAnimation() {
  // new angle is previous angle + force modulo 360 (so that it stays between 0 and 360)
  angle = (angle + force) % 360;
  // decay force according to inertia parameter
  force *= inertia;
  rouletteElem.style.transform = 'rotate('+angle+'deg)';
  // stop animation if force is too low
  if (force < 0.05) {
    // score roughly estimated
    scoreElem.innerHTML = values[Math.floor(((angle / 360) * values.length) - 0.5)];
    return;
  }
  requestAnimationFrame(doAnimation);
}

<body>
<div style="z-index: 0; position: relative">
    <img class="roulette_wheel" src="http://pngimg.com/uploads/roulette/roulette_PNG14.png" width="300px" height="300px" />
    <div style="position: absolute; top: 0px; left: 150px; background-color: red; width: 1px; height: 40px;"></div>
    <button value="spin" onclick="roulette_spin(this)">SPIN</button>
    <span id="score"></span>
</div>

answered Feb 26 '19 at 14:26

remix23

2,632
2
11
21

I don't understand why it does not work when i try to run it on my site, It works here but on my webpage it give an cannot find style of undefined error – Hristijan Mizimakovski Feb 26 '19 at 15:25
The only acces to a property named style in this code is from `rouletteElem.style.transform...`. It means that rouletteElem is undefined. It can be `undefined` if it has not been declared, if it not visible in the current scope, or if the selector you used did not return anything. Try and make a fiddle out of your implementation and I'll have a look. – remix23 Feb 26 '19 at 15:35
I tried everything still it does not work, `Uncaught TypeError: Cannot read property 'style' of undefined at doAnimation` – Hristijan Mizimakovski Feb 26 '19 at 16:25
please use https://jsfiddle.net/ or https://codepen.io/ to create an executable example of your code so that someone can help ;) – remix23 Feb 26 '19 at 16:53
you have to change the load type to "no wrap - bottom of " in jsfiddle, otherwise the onclick won't work : https://jsfiddle.net/utxvqh1m/1/ – Vincent G Feb 26 '19 at 18:41
Yeah it does work now... but why is it not working when i use it in my own html file... – Hristijan Mizimakovski Feb 26 '19 at 19:22
please show us your complete html file and we'll figure it out – Vincent G Feb 26 '19 at 20:06
you had a dot too much in your classname selector, see it here: https://jsfiddle.net/aj86vu21/1/ – Vincent G Feb 26 '19 at 21:25
@remix23: I really like the way this works. Wheel spins and the correct values are depicted. I have a different need that I was wondering if you could help. I have a seven part wheel and would like to have the spin stops randomly at the center of any one of the 7 parts, every time I click on the spin button. How would I achieve this feature? Right now, it stops randomly at the edges or at a part of my sections of the wheel that do not have any content. If it stops at the center of the math calculations, such as ((360/7)/2), which yields the center of the first block. – Johnny Jan 28 '21 at 17:57
@Johnny For that you will need to set attractors. Above, the rotation speed update is `newSpeed = speed- (speed* (1 - inertia))`. For each update you could compute the oriented (+/-) angular distance of let's say the three closest slices, then compute the average resulting force `attraction = factor * (1/angDist1 + 1/angDist2 + 1/angDist3) / 3` then change the calculation to `newSpeed = speed - (speed* (1 - inertia)) - attraction`, stop animation when speed is low AND position very close to a target. you will need to fine tune a small `factor` AND to limit 1/angDist to prevent infinite force. – remix23 Jan 29 '21 at 12:07
@Johnny. The comment above is untested and probably inacurate. I could give a proper answer within a new question about your seven part wheel. Long live Newton and simple ad hoc physics engines ;-) – remix23 Jan 29 '21 at 12:10
@remix23 I created my project here for you to provide your guidance for improvement: https://stackoverflow.com/questions/65959865/spin-an-equidistance-seven-part-wheel-and-stop-at-the-center-of-a-randomly-degre – Johnny Jan 29 '21 at 18:39
@Johnny I've added my answer there – remix23 Feb 01 '21 at 12:28

Making an image spin with css and jQuery

3 Answers3