nilerafter24 nilerafter24 - 6 months ago 24
Javascript Question

Why won't this semi circle grow?

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)
}
}
});


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

Answer

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);