0

solicito una guía para cambiar implementar este script en html directamente. Lo que busco es poner el script directamente en el HTML. y que me muestre las estrellas, aplicando la clase star-light y muestre las estrellas.

for(var star = 1; star <= 5; star++)
                        {
                            var class_name = '';

                            if(data.review_data[count].rating >= star)
                            {
                                class_name = 'text-warning';
                            }
                            else
                            {
                                class_name = 'star-light';
                            }

                            html += '<i class="fas fa-star '+class_name+' mr-1"></i>';
                        }

Esto es lo que he intentado para mostrar el valor de la variable data.review_data[count].rating ha sido esto pero no me funciona.

<div class="card-body">
<script>

for(var star = 1; star <= 5; star++)
                        {
                            var class_name = '';

                            if(data.review_data[count].rating >= star)
                            {
                                class_name = 'text-warning';
                            }
                            else
                            {
                                class_name = 'star-light';
                            }

                            html += '<i class="fas fa-star '+class_name+' mr-1"></i>';
                        }



</script>
</div>

Continuo tratando de solucionar este detalle y tengo lo siguiente pero tampoco me funciona

<script>
function user_rating() {
for(var star = 1; star <= 5; star++) {
  var class_name = '';
  if(data.review_data[count].rating >= star) {
    class_name = 'text-warning';
  } else {
    class_name = 'star-light';
  }
  html += '<i class="fas fa-star ' + class_name + ' mr-1"></i>';
                                }
                                document.getElementById('user_rating').innerHTML = user_rating()                    
                        };
          
</script>
<div class="card-body">
  <div id"resultado"></div>
  
</div>

5
  • Simple y sencillamente, no puedes. El elemento <script> puede tener padres de tipo phrasing content o metadata content. <div> no es ninguno de los dos.
    – Arriel
    Commented el 20 mar. 2022 a las 21:07
  • Suena a un problema de tipo X -> Y, donde tienes un problema 'X' y creas una solución 'Y'. Pero tu solución 'Y' tiene su propio problema y lo quieres resolver. Lo que no sabes es que tu solución 'Y' en realidad no es una solución para tu problema 'X', y ya has perdido un montón de tiempo en solucionar 'Y', que podrías usar para solucionar 'X'. Entonces, qué es lo que en realidad quieres lograr?
    – Arriel
    Commented el 20 mar. 2022 a las 21:13
  • 1
    Dentro de un div no se puede. Pero dijiste en el HTML, entonces si se puede: dentro de la etiqueta body, al final de todos. Ahí se puede insertar el script <script></script> Commented el 20 mar. 2022 a las 21:14
  • Ya la he colocado al final del body, pero no sé como llamarla para que muestre en el div Commented el 20 mar. 2022 a las 22:26
  • De dónde viene user_rating() ? Y también de dónde viene data.review_data[count].rating ? Porque estos son los problemas que no se puede mostrar en el HTML. O tal vez falta algo de código js Commented el 20 mar. 2022 a las 23:34

2 respuestas 2

1

Realice una demostración de cómo mostrar tu contenido en el DOM (HTML).

La función user_rating() es llamado desde otra parte, pero en esta demo se auto llama al final, para que funcione.

En el if comenté para que funcione la demo Tu vuelve a descomentar.

En el if y else agregué el contenido para mostrar en el DOM mediante backtik (comilla simple invertida). O no se verá. En cada unas de ellas puedes modificar el estilo de la etiqueta <i> (o insertar cualquier HTML).

Espero que esto te ayude a mejorar

function user_rating() { 
 
 for(var star = 1; star <= 5; star++) { 
  
  var html = '';
  
  if( /* data.review_data[count].rating >= */ star) { 
   
   html += `
   <i class="fas fa-star mr-1"></i> 
   <h1>Estoy en el IF</h1>
   `; 

  } else {
   
   html += `
   <i class="fas fa-star mr-1"></i> 
   `; 
   
  } 
  
 }; 
  
 // se muestra el html en #resultado
document.getElementById("resultado").innerHTML = html;   

};

// si esta función no es llamada en otro lado, se cierra aquí 
// Puedes quitar esto luego
user_rating();
<!DOCTYPE html>
<html>
 <head>
  <meta http-equiv="CONTENT-TYPE" content="text/html; charset=UTF-8">
 </head>
 <body>
  
  <div class="card-body"> 
   
   <div id="resultado">a</div> 
   
  </div>
  
  <!-- enlazar archivo .js al final de body (aquí) -->
  <script src=""></script>
  
  
 </body>
</html>

0

por fin logré resolver mi problema, lo único que debía hacer era transformar el script a código php y me quedó de esta manera:

<div class="card-header">Review by <b><?php echo $rws['user_name']?></b>
    <div class="alignright">
        <?php 
        
        for($star = 1; $star <= 5; $star++) {
                $class_name = '';
        if($rws['user_rating'] >= $star) {
        $class_name = 'text-warning';
        } else {
        $class_name = 'star-light';
        }
        echo  '<i class="fas fa-star ' . $class_name .' mr-1"></i>';
        }
        ?> 
    </div>
</div>

Con esto, se revisa el valor del user_rating en la base e datos y dependiendo del número pinta las estrellas usando la clase text-warning, si hay por ejemplo una calificación de 4 estrellas, entonces pinta 1 con la clase star-light.

es todo mil gracias a quienes apoyaron.

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.