nilerafter24 - 1 year ago 67

Javascript Question

Basically,

I have two semi-circles. One(circle0) is of constant radius and the inner semi-circle(circle1, with gradient) is of variable radius. circle1 has initial value of 1% radius of circle0.

I want to input a value in the target box(0-100) for the new radius of circle1. I have put an interval of 100ms for a 1% step in radius of circle1 to show it growing but it doesn't seem to work.

I am not very good at javascript/jquery but any help is greatly appreciated.

See demo here: https://jsfiddle.net/nilerafter24/ma845o6d/3/

Here is my javascript:

`$(document).ready(function() {`

function circle_set(delta) {

if (!delta) {

return false;

} else {

var e = document.querySelectorAll('circle[id^=circle]');

var radius0 = parseInt(e[0].getAttribute('r'), 10);

var radius1 = parseInt(e[1].getAttribute('r'), 10);

var currentRadius = (delta / 100) * 50;

if (currentRadius <= radius0) {

setTimeout(function() {

if (radius1 <= currentRadius) {

radius1++;

e[1].setAttribute('r', String(radius0) + "%");

},

},100);

}

}

}

var inputTargetButton = document.getElementById('executeTarget');

var inputTargetValue = document.getElementById('setTarget');

if (inputTargetButton.type == 'button') {

inputTargetButton.onclick = function() {

circle_set(inputTargetValue.value)

}

}

});

Corrected big mistake.Changed radius0 to radius1. Need more coffee.

Answer Source

you have to use setInterval for your function, also your condition is incorrect. work this JsFiddle

```
setInterval(function() {
if (radius1 <= currentRadius) {
radius1++;
e[1].setAttribute('r', String(radius1) + "%");
}}, 100);
```