# Problem with a script

``````<div class="container">
<div class="circle" data-degree="20" data-color="#ff2972">
<h2 class="number"><span>%</span></h2>

</div>

<script>
let circle = document.querySelectorAll('.circle');

// Itera su tutti gli elementi con classe 'circle'
circle.forEach(function(progress) {
let degree = 0;
var targetDegree = parseInt(progress.getAttribute('data-degree'));
let color = progress.getAttribute('data-color');
let number = progress.querySelector('.number');

var interval = setInterval(function() {
degree += 1;
if (degree > targetDegree) {
clearInterval(interval);
return;
}
let maxAngle = 100; // 50% rappresenta un semicerchio
let actualAngle = (degree / 50) * maxAngle; // Calcola l'angolo corretto

progress.style.background = `conic-gradient(\${color} \${actualAngle}%, #222 \${actualAngle}%)`;
number.innerHTML = degree + '<span>C°</span>';

// Aggiungi console.log per il debug
console.log("Degree:", degree);
console.log("Target Degree:", targetDegree);
console.log("Actual Angle:", actualAngle);
}, 100);
});
});
</script>
<style>
.container {
position: relative;
display: flex;
justify-content: center;
align-items: center;
gap: 40px;

}

.container .circle {
position: relative;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
width: 130px;
height: 130px;
}

.container .circle::before {
content: '';
position: absolute;
inset: 5px;
background: #222;
opacity: 0.8;
}

.container .circle::after {
content: '';
position: absolute;
width: 70px;
height: 70px;
background: #333;
border: 12px solid #4d4c51;
box-shadow: inset 0 5px 10px rgba(0, 0, 0, 0.25),
0 10px 10px rgba(0, 0, 0, 0.75),
0 -2px 2px rgba(255, 255, 255, 0.5),
inset 0 4px 2px rgba(0, 0, 0, 0.25),
inset 0 -2px 2px rgba(255, 255, 255, 0.5);
}

.container .circle .number {
position: relative;
color: #fff;
z-index: 10;
line-height: 1em;
font-size: 1.5em;
font-weight: 400;
}

</style>
``````

have a problem: the script on visual code all works fine on template node the script doesnt work someone can help me why this happen tx a lot

We probably need some clues here.

I assume you are using http-in/-out nodes?

Have you checked the browser console for errors?

Is it some part of the script not working - e.g. the setInterval or all of it?

The code is hard to follow as you've lost all the indentation, have you put a console.log outside the event listener to make sure the script block is being called at all?

in node red non funziona in studiovisualcode si se cambi datadegree il cerchio si illumina fino al numero inserito in node red non fa nulla prova il codice e capisci

Please answer the other questions as well. It looks like you are using Dashboard? Please let us know if you are and if so whether it is the old one or the new.

``````<div class="container">
<div class="circle" id="circle" data-degree="30" data-color="#ff2972">
<h2 class="number" id="number"><span>%</span></h2>
</div>
</div>

<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<script>
// Funzione per creare la barra di avanzamento circolare
function createCircularProgressBar() {
let degree = 0;
const targetDegree = parseInt(\$('#circle').data('degree'));
const color = \$('#circle').data('color');
const number = \$('#number');
const maxAngle = 100; // 50% rappresenta un semicerchio
const interval = setInterval(() => {
degree += 1;
if (degree > targetDegree) {
clearInterval(interval);
return;
}
const actualAngle = (degree / 50) * maxAngle; // Calcola l'angolo corretto
number.html(degree + '<span>C°</span>');

}, 50);
}

// Esegui la funzione quando il documento è pronto
</script>

<style>
.container {
position: relative;
display: flex;
justify-content: center;
align-items: center;
gap: 40px;
}

.circle {
position: relative;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
width: 130px;
height: 130px;
}

.circle::before {
content: '';
position: absolute;
inset: 5px;
background: #222;
opacity: 0.8;
}

.circle::after {
content: '';
position: absolute;
width: 70px;
height: 70px;
background: #333;
border: 12px solid #4d4c51;
box-shadow: inset 0 5px 10px rgba(0, 0, 0, 0.25),
0 10px 10px rgba(0, 0, 0, 0.75),
0 -2px 2px rgba(255, 255, 255, 0.5),
inset 0 4px 2px rgba(0, 0, 0, 0.25),
inset 0 -2px 2px rgba(255, 255, 255, 0.5);
}

.number {
position: relative;
color: #fff;
z-index: 10;
line-height: 1em;
font-size: 1.5em;
font-weight: 400;
}
</style>
``````

This topic was automatically closed 14 days after the last reply. New replies are no longer allowed.