Problema con uno script in node template

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

    <script>
    document.addEventListener("DOMContentLoaded", function(event) {
    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;
            border-radius: 50%;
        }

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

        .container .circle::after {
            content: '';
            position: absolute;
            width: 70px;
            height: 70px;
            background: #333;
            border: 12px solid #4d4c51;
            border-radius: 50%;
            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>

Preformatted texthave a problem in visual code all works fine in template node the script doesnt work someone can help me why this happen tx a lot

3

Closed - duplicate topic

See: Proble with template node