I get all movie datas from Firebase and also i get score of the movies. If the score of the movie is higher than 70, then i will change color of the id as “deepskyblue”, if it is 50 or higher it will be “orange” and lastly if it is lower than 50 it will be “crimson”(red). When i do this, it only changes my first movie’s id’s color. But i wanna change all of them. How can i do this?
My Website
Console.log(i)
var movieNo = 0;
let html = '';
var body = document.getElementById('editor');
var body2 = document.getElementById('week');
function AddItemsToTable(name, score, img, id) {
var movies = `<div class="content"><img src="${img}" ><p><a href="Admin.html?movieId=${id}">${name}</a></p> <p> <i class="fa fa-star" id="star"></i> <a class="scoretxt">${score}</a> </p> </div>`;
html = movies;
body.innerHTML += html;
body2.innerHTML+=html;
}
function AddAllItemsToTable(TheMovies){
movieNo=0;
var counter=0;
TheMovies.forEach(element => {
if (counter===6) {
return;
}
AddItemsToTable(element.movieName, element.movieScore, element.movieImage, element.movieId);
var i = document.getElementsByClassName("fa fa-star")[element.movieId];
console.log(i);
if (element.movieScore>=70) {
i.style.color= "deepskyblue";//good movie
}
else if (element.movieScore>=50) {
i.style.color= "orange";//not bad
}
else {
i.style.color="crimson";//bad movie
}
counter++;
});
}
function getAllDataOnce(){
const dbRef=ref(db);
get(child(dbRef,"Movies"))
.then((snapshot)=>{
var movies=[];
snapshot.forEach(childSnapshot => {
movies.push(childSnapshot.val())
});
AddAllItemsToTable(movies);
});
}
window.onload= getAllDataOnce; <div class="body" id="body">
<div class="baslik">Opening This Week</div>
<div class="baslik2"><a href="series.html">See all</a></div>
<div id="week">
</div>
<div class="baslik">Editor's Picks</div>
<div class="baslik2"><a href="movies.html">See all</a></div>
<div id="editor">
</div>
</div>