svg dom manipulation changing color stroke

Question

.circular-chart {
    display: block;
    max-width: 80%;
    max-height: 40px;
  }
  
  .circle {
    display: flex;
    justify-content: center;
    animation: progress 1s ease-out forwards;
  }

  .circle-red {
    stroke: red;
    fill: white;
    stroke-width: 4;
    stroke-linecap: round;
  }

  .circle-darkorange {
    stroke: darkorange;
    fill: white;
    stroke-width: 4;
    stroke-linecap: round;
  }

  .circle-lime {
    stroke: lime;
    fill: white;
    stroke-width: 4;
    stroke-linecap: round;
  }
  
  @keyframes progress {
    0% {
      stroke-dasharray: 0 100;
    }
  }

  .movie-rating {
    position: absolute;
    margin-left: 10px;
  }

const inputSearch = document.getElementById("input-search")
const searchForm = document.getElementById("search-form")
const movies = document.getElementById("movies")
let dataArray = []
let tooltipModal
let circleStrokeRate

// render html data in DOM
function renderHtmlData() {
    let html = ""

    dataArray.forEach(movie => {
        let urlImg = "https://www.themoviedb.org/t/p/w440_and_h660_face/"

        if(movie.poster_path === null) {
            urlImg = "img/no_image.jpeg"
        } else {
            urlImg = `https://www.themoviedb.org/t/p/w440_and_h660_face/${movie.poster_path}`
        }

        html += `
            <article class="movie-container">
                <div class="poster-container">
                    <img 
                        src="${urlImg}" 
                        class="video-img"
                    >
                    <div class="tooltip-disable swing-in-right-fwd" data-modalid="${movie.id}">
                        <p class="add-watchlist">
                        <i class="fa-regular fa-eye"></i>
                            Watchlist
                        </p>
                        <p class="add-favorites">
                            <i class="fa-regular fa-star"></i>
                            Favorites
                        </p>
                    </div>
                    <button id="more-btn" data-btnid="${movie.id}">...</button>
                </div>
                <div class="movie-details">
                    <div class="col col-rating">
                        <span class="movie-rating">${movie.vote_average.toFixed(1)}</span>

                        <svg viewBox="0 0 36 36" class="circular-chart">
                            <path class="circle"
                                stroke-dasharray="${movie.vote_average * 10}, 100"
                                d="M18 2.0845
                                a 15.9155 15.9155 0 0 1 0 31.831
                                a 15.9155 15.9155 0 0 1 0 -31.831"
                            />
                        </svg>

                    </div>                         
                    <div class="col col2">
                        <h3>${movie.title}</h3>
                        <p class="movie-date">${movie.release_date}</p>
                    </div>
                </div>
            </article>
        `
        movies.innerHTML = html
        tooltipModal = document.querySelectorAll(".tooltip-disable")    
        circleStrokeRate = document.querySelectorAll(".circle")
        
        setStrokeColor(movie.vote_average * 10)
    })
}

// search for movies or series
searchForm.addEventListener("submit", async function (e) {
    e.preventDefault()

    const res = await fetch(`
        https://api.themoviedb.org/3/search/movie?api_key="APIKEY&
        page=1&include_adult=true&query=${inputSearch.value}
    `)
    const data = await res.json()
    dataArray = data.results

    renderHtmlData()
})

// handle circle stroke color rating movie
function setStrokeColor(percent) {
    circleStrokeRate.forEach(circle => {
        if (percent < 40) {
            console.log("red")
            circle.classList.add("circle-red")
        } else if (percent < 70) {
            console.log("orange")
            circle.classList.add("circle-darkorange")
        } else {
            console.log("lime")
            circle.classList.add("circle-lime")
        }
    })
}

hi guys hope someone could help me on this: so the problem is when i try to check the percentage if is bigger or smaller and give it a stroke to the SVG it always returns me the color of the first svg element and it passes to all the others, and i cant see why is that, what im doing wrong. Any help on this??

Answer 1

When you call setStrokeColor you set the percentage to all elements with the class "circle" not just the one you just added. You call the function when you build the original html.

<svg viewBox="0 0 36 36" class="circular-chart">
  <path class="circle ${setStrokeColor(moive.vote_average)}"
    stroke-dasharray="${movie.vote_average * 10}, 100"
    d="M18 2.0845
    a 15.9155 15.9155 0 0 1 0 31.831
    a 15.9155 15.9155 0 0 1 0 -31.831"
   />
 </svg>

function setStrokeColor(percent) {
   circleStrokeRate.forEach(circle => {
       if (percent < 40) {
          return "circle-red";
       } else if (percent < 70) {
          return "circle-darkorange";
       } else {
          return "circle-lime";
       }
   });

}