Hi everyone, I need some help with my code. Feel free to check it out here
Currently, I'm working on implementing multiple circular progress bars that can function dynamically. The goal is to be able to add additional progressCircle_# objects with different percentage values as needed. While the progress bars are loading the data and executing the animation, I am encountering an issue when inspecting the element in the browser. The error message "ReferenceError: start is not defined" keeps appearing. I would appreciate any suggestions on how to solve this problem. Thank you!
var progressCircle_1 = {
procent: 89,
startFrom: 0,
incrementBy: 1,
canvasId: 'canvas',
procentId: 'procent',
funct: function() {
var start = setInterval(function() {
draw.call(progressCircle_1)
}, 50);
}
}
var progressCircle_2 = {
procent: 59,
startFrom: 0,
incrementBy: 1,
canvasId: 'canvas1',
procentId: 'procent1',
funct: function() {
var start = setInterval(function() {
draw.call(progressCircle_2)
}, 50);
}
}
progressCircle_1.funct();
progressCircle_2.funct();
function draw() {
(this.startFrom < this.procent) ? this.startFrom++: clearInterval(start);
var getCanvas = document.getElementById(this.canvasId).getContext('2d');
var getNumber = document.getElementById(this.procentId).innerHTML = this.incrementBy++;
getCanvas.beginPath();
getCanvas.arc(250, 250, 100, 0, 0.06283185307179587 * this.startFrom);
getCanvas.lineWidth = '15';
getCanvas.strokeStyle = "white";
getCanvas.lineCap = "round";
getCanvas.stroke();
};#canvas {
border: 1px solid red;
transform: rotate(0deg);
}
#procent {
font-size: 65px;
color: white;
position: absolute;
top: 160px;
left: 200px;
}
#procent::after {
content: '%';
}
.container {
background-color: lightblue;
height: 500px;
width: 500px;
}
#canvas1 {
border: 1px solid red;
transform: rotate(0deg);
}
#procent1 {
font-size: 65px;
color: black;
position: absolute;
top: 660px;
left: 200px;
}
#procent1::after {
content: '%';
}
.container1 {
background-color: lightgrey;
height: 500px;
width: 500px;
}
#canvasProgressBar {
position: relative;
top: 100px;
left: 10px;
}<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title></title>
<meta name="description" content="Interaktywny poradnik szybkiego startu dla Brackets.">
<link rel="stylesheet" href="main.css">
</head>
<body>
<div class="container">
<canvas id="canvas" width="500" height="500">
</div>
<p id="procent"></p>
<div class="container1">
<canvas id="canvas1" width="500" height="500">
</div>
<p id="procent1"></p>
<script src="main.js"></script>
</body>
</html>