Based on radio buttons, how can I list the stars in an html document according to the radio value?

Question

I'm trying to do the following: Each time you choose a radio button, these must become in stars. Each number must be the same number of stars.

I've only been able to make the first row works; as the picture shows.

I'm not using jquery. Only vanilla javascript (pure javascript )

const radio = document.getElementsByName("gender");
const boton = document.getElementById("btnBoton");
const listado = document.getElementById('contenedor-filas');

boton.addEventListener('click', enviaNumeros);

function enviaNumeros()
{
    radio.forEach(function(elementos){
        if(elementos.checked)
        {
            estrellas = document.createElement('h3');
            estrellas.textContent = elementos.value;
            listado.appendChild(estrellas);
            console.log(elementos.value)
        }
    });

    ponerEstrellas();
}


function ponerEstrellas()
{
    let c = document.getElementsByTagName('h3');
    
    for (i = 0; i < c.length; i++){
        if (c[i].textContent === '5'){
            document.querySelector('h3').innerText = "*****";
        }
    }   
}





    
    
    
    
    
    Review System
    
    
    





    
        
             5

             4

             3

             2

             1

            
        
    

    
        
            Comment List

I appreciate your help guys.

kht · Accepted Answer

You seem to be adding rows with the number value of the radio button as text, and then converting every row from numbers to '*'. Why not just convert to '*' before adding rows? You only need one function then.

const radio = document.getElementsByName("gender");
const boton = document.getElementById("btnBoton");
const listado = document.getElementById('contenedor-filas');

boton.addEventListener('click', enviaNumeros);

function enviaNumeros()
{
    radio.forEach(function(elementos){
        if(elementos.checked)
        {
            estrellas = document.createElement('h3');
            let s = '';
            for (let i = 0; i < elementos.value; i++) {
            	s += '*';
            }
            
            estrellas.textContent = s;
            listado.appendChild(estrellas);
        }
    });
}


        
             5

             4

             3

             2

             1

            
        
    

    
        
            Comment List

Based on radio buttons, how can I list the stars in an html document according to the radio value?

Answers (2)

Related Questions