Remove a value from a radio button menu

Question

Good morning, I’m trying to make a star rating system with javascript but I’m not getting a value out of the choice of radio Buttons menu. The Add button serves to add the value that each radio button has to the readonly input text that is on the right but with my code the output is only Undefined.

This is my layout, has 5 radio Buttons along with 5 Labels edited in CSS to look like this:

I’m still very new to Javascript so if you discover unnecessary code in my script I’ll be happy for the help, this is the script:

var estrelas;

var estrela5 = document.getElementById('star5').value;

var estrela4 = document.getElementById('star4').value;

var estrela3 = document.getElementById('star3').value;

var estrela2 = document.getElementById('star2').value;

var estrela1 = document.getElementById('star1').value;

if (document.getElementById('star5').click()) {
    estrelas.value = estrela5;
}

if (document.getElementById('star4').click()) {
   estrelas.value = estrela4;
}

if (document.getElementById('star3').click()) {
   estrelas.value = estrela3;
}

if (document.getElementById('star2').click()) {
   estrelas.value = estrela2;
}

if (document.getElementById('star1').click()) {
   estrelas.value = estrela1;
}



function setValue() {
     if (input2.value == '' || input2.value == null) {
          input2.value = estrelas;
     }
};

This is my radio Buttons HTML menu code:

<input type="radio" id="star5" name="rate" value="5" />
<label for="star5" title="5 Stars">5 stars</label>
<input type="radio" id="star4" name="rate" value="4" />
<label for="star4" title="4 Stars">4 stars</label>
<input type="radio" id="star3" name="rate" value="3" />
<label for="star3" title="3 Stars">3 stars</label>
<input type="radio" id="star2" name="rate" value="2" />
<label for="star2" title="2 Stars">2 stars</label>
<input type="radio" id="star1" name="rate" value="1" />
<label for="star1" title="1 Star">1 star</label>

Answer 1

Since the stars have a fixed value (from 1 to 5) I think it’s unnecessary for you to take this input value, as you already know the values, I think you can store these values in an array and do the insertion in your input readonly as needed.

I made an example, you can adapt if you want.

const stars = [1,2,3,4,5];
document.querySelectorAll('.stars li').forEach(function(li, index) {
    li.addEventListener('click', function() {
        document.querySelector('.starSelected').innerHTML = (index == 0 ? stars[index] + " Estrela" : stars[index] + " Estrelas")
    });
});

ul {
  display: flex;
  justify-content: center;
  align-items: center;
  list-style: none;
}

li {
  border: 1px solid;
  border-radius: 5px;
  margin: 10px;
  padding: 10px;
  cursor: pointer;
}

.starSelected {
display: flex;
    justify-content: center;
    align-items: center;
    text-transform: uppercase;
    padding: 5px;
    border-radius: 5px;
    background-color: #e1fd66;
    width: 100%;
    max-width: 200px;
    margin: 0 auto;
   }

<ul class="stars">
        <li>1 star</li>
        <li>2 star</li>
        <li>3 star</li>
        <li>4 star</li>
        <li>5 star</li>
    </ul>

    <div class="starSelected">Sem Estrelas</div>