Skip to main content
2 de 4
se añadieron 48 caracteres en el cuerpo

Cambio el HTMLImageElement.src pero algo me lo sobreescribe

tengo una funcion que hace un switch dependiendo de una puntuacion me cambia los svg de imagenes que tengo de estrellas para hacer un "rating", aqui en el ejemplo de codigo esta simplificado a solo esto pero realmente la idea es cojelo de una base de datos e comprobar la puntuacion cada vez que entras en la pagina (Esa parte ya esta hecha).

Por ejemplo, si el rating es 0.5 (Todo sobre cinco siempre):

let childs = document.getElementById("allstars").childNodes;
var rating = 0.5;

switch (rating) {

    case (0):
    document.querySelectorAll('.star')
    .forEach(el => el.src = '../assets/empty_star.svg');
    break;

    case (0.5):

    document.querySelectorAll('.star')
    .forEach(el => el.src = '../assets/empty_star.svg');

    childs[0].src = "../assets/half_star.svg";
                    
    break;

    case (1):

    document.querySelectorAll('.star')
    .forEach(el => el.src = '../assets/empty_star.svg');

    childs[0].src = "../assets/full_star.svg";
    break;

    case (1.5):

    document.querySelectorAll('.star')
    .forEach(el => el.src = '../assets/empty_star.svg');

    childs[0].src = "../assets/full_star.svg";
    childs[1].src = "../assets/half_star.svg";
    break;

    case (2):

    document.querySelectorAll('.star')
    .forEach(el => el.src = '../assets/empty_star.svg');

    for (var i = 0; i < 2; i++) {
        childs[i].src = "../assets/full_star.svg";
    }
    break;

    case (2.5):

    document.querySelectorAll('.star')
    .forEach(el => el.src = '../assets/empty_star.svg');

    for (var i = 0; i < 2; i++) {
        childs[i].src = "../assets/full_star.svg";
    }
    childs[2].src = "../assets/half_star.svg";
    break;

    case (3):

    document.querySelectorAll('.star')
    .forEach(el => el.src = '../assets/empty_star.svg');

    for (var i = 0; i < 3; i++) {
        childs[i].src = "../assets/full_star.svg";
    }
    break;

    case (3.5):

    document.querySelectorAll('.star')
    .forEach(el => el.src = '../assets/empty_star.svg');

    for (var i = 0; i < 3; i++) {
        childs[i].src = "../assets/full_star.svg";
    }
    childs[3].src = "../assets/half_star.svg";
    break;

    case (4):

    document.querySelectorAll('.star')
    .forEach(el => el.src = '../assets/empty_star.svg');

    for (var i = 0; i < 4; i++) {
        childs[i].src = "../assets/full_star.svg";
    }
    break;

    case (4.5):

    document.querySelectorAll('.star')
    .forEach(el => el.src = '../assets/empty_star.svg');

    for (var i = 0; i < 4; i++) {
        childs[i].src = "../assets/full_star.svg";
    }
    childs[4].src = "../assets/half_star.svg";
    break;

    case (5):

    document.querySelectorAll('.star')
    .forEach(el => el.src = '../assets/full_star.svg');
    break;

    default:
    console.log("No deberia estar aqui la verdad");
}
.star {
  width: 5%;
  filter: brightness(0) invert(1);
}
<div id="allstars">
  <img id="star_1" class="star" src="../assets/full_star.svg">
  <img id="star_2" class="star" src="../assets/full_star.svg">
  <img id="star_3" class="star" src="../assets/full_star.svg">
  <img id="star_4" class="star" src="../assets/full_star.svg">
  <img id="star_5" class="star" src="../assets/full_star.svg">
  <span style="font-size: 11px;"> (0.5/27)</span>
 </div>
Me deja todo con la imagen de las estrellas vacias por algun motivo.

Cuando lo ejecuto me suele salir por console.log que ha cambiado la imagen, pero si lo compruebo despues de salir de la misma me pisa los valores y pone el "empty_star.svg".

Lo que me muestra por consola:

Lo que me muestra la consola

Resultado:

Resultado

Y realmente tendria que acabar asi:

Resultado deseado