How to rotate the block every time you click on the button? - html

Question

More precisely, the rotation of the block does not work.
At the moment, the block turns once, and I want to turn every time i click in both directions.
how to do it ?
var now = 10
$('.left').click(function() {
$(".d").css('transform', 'rotate (' + now + 'deg)');
});
.r {
width: 200px;
height: 200px;
border: 20px solid;
border-radius: 50%;
}
.d {
width: 200px;
height: 200px;
border: 20px solid blue;
border-radius: 50%;
}
.wrapper {
width: 230px;
}
.parent {
width: 240px;
height: 240px;
position: relative;
}
.r,
.d {
position: absolute;
}
.d {
border-right-color: transparent;
border-top-color: transparent;
transform: rotate(45deg);
}
.btns {
display: table;
margin: 10px auto;
}
button {
margin-left: 10px;
}
<div class="wrapper">
<div class="parent">
<div class="r"></div>
<div class="d"></div>
</div>
<div class="btns">
<button class="left">+</button>
<button class="right">-</button>
</div>
</div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
At the very beginning I wanted to make such a regulator as in the screenshot.
but since there is no great knowledge in JS and I decided to do it in HTML and CSS + jQuery
wanted to use svg but I don't know how to change it
hope for your help

Answer 1

You need to keep a running total in now so that you can keep incrementing. For example:
var now = 0;
$('.left').click(function() {
now += 10;
$(".d").css('transform', 'rotate(' + now + 'deg)');
});
$('.right').click(function() {
now -= 10;
$(".d").css('transform', 'rotate(' + now + 'deg)');
});
As another person has just pointed out, your spaces between rotate and ( were also breaking it.
Here's a CodePen if you need it: https://codepen.io/MSCAU/pen/MZgqop

Answer 2

I think the Problem is with unnecessaryspaces that I remove I hope to help you.
var now = 10;
$('.left').click(function() {
now += 10;
$(".d").css('transform', 'rotate('+now+'deg)');
});
$('.right').click(function() {
now -= 10;
$(".d").css('transform', 'rotate('+now+'deg)');
});

Answer 3

In this case you have to increase or decrease 10 deg again and again here is an example:
$(function(){
var now = 10,
count = 0;
$('.left').click(function() {
rotate( count + 1);
});
$('.right').click(function() {
rotate( count - 1);
});
function rotate(new_count) {
var rotatePx = ((new_count) * (now));
$(".d").css('transform', 'rotate('+ rotatePx +'deg)');
count = new_count;
}
});