0

necesito ayuda no tengo mucho conocimiento en javascript. debo obtener un valor del 1 al 5 con estrellas e imprimirlo en un input. El codigo que tengo funciona bien solo que nose como hacer que me imprima el valor en un input.

Lo que busco es imprimir el valor que obtengo de "rating__result" e imprimirlo en un

Intenté de esta forma: const ratingResult = document.querySelector("input[name='stars']");

pero no funciono. Necesito que el resultado se imprima en un input para luego guardarlo con el metodo POST

const ratingStars = [...document.getElementsByClassName("rating__star")];
const ratingResult = document.querySelector(".rating__result");

printRatingResult(ratingResult);

function executeRating(stars, result) {
   const starClassActive = "rating__star fas fa-star";
   const starClassUnactive = "rating__star far fa-star";
   const starsLength = stars.length;
   let i;
   stars.map((star) => {
      star.onclick = () => {
         i = stars.indexOf(star);

         if (star.className.indexOf(starClassUnactive) !== -1) {
            printRatingResult(result, i + 1);
            for (i; i >= 0; --i) stars[i].className = starClassActive;
         } else {
            printRatingResult(result, i);
            for (i; i < starsLength; ++i) stars[i].className = starClassUnactive;
         }
      };
   });
}

function printRatingResult(result, num = 0) {
   result.textContent = `${num}/5`;
}

executeRating(ratingStars, ratingResult);
@import "https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.2/css/all.min.css";
body {
   height: 100vh;
   display: grid;
   place-items: center;
   overflow: hidden;
}

.rating {
   position: relative;
   width: 180px;
   background: transparent;
   display: flex;
   justify-content: center;
   align-items: center;
   gap: .3em;
   padding: 5px;
   overflow: hidden;
   border-radius: 20px;
   box-shadow: 0 0 2px #b3acac;
}

.rating__result {
   position: absolute;
   top: 0;
   left: 0;
   transform: translateY(-10px) translateX(-5px);
   z-index: -9;
   font: 3em Arial, Helvetica, sans-serif;
   color: #ebebeb8e;
   pointer-events: none;
}

.rating__star {
   font-size: 1.3em;
   cursor: pointer;
   color: #dabd18b2;
   transition: filter linear .3s;
}

.rating__star:hover {
   filter: drop-shadow(1px 1px 4px gold);
}
<div class="rating">
        
          <span class="rating__result"></span> 
         <i class="rating__star far fa-star"></i>
         <i class="rating__star far fa-star"></i>
         <i class="rating__star far fa-star"></i>
         <i class="rating__star far fa-star"></i>
         <i class="rating__star far fa-star"></i>
      </div>
   
      
     // Imprimir resultado en input
       <input name="stars" value="0" type="number" class="rating__result"> 
       
       <hr>
      

1 respuesta 1

2

Ya casi lo tenias, tan solo debes efectuar este cambio.

Donde pones esto:

result.textContent = `${num}/5`;

cámbialo por esto:

result.value = num;

porque es un input y el atributo que contiene lo que ves es el value.

textContent en este caso incluiría texto como nodo hijo pero no como value.

Aparte de eso, lo que decias con esto:

const ratingResult = document.querySelector("input[name='stars']");

también funciona ahora que ya hemos puesto el value.

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.