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>