基于单选按钮，如何根据单选值列出html文档中的星星？

Question

我正在尝试执行以下操作：每次选择单选按钮时，这些按钮都必须变成星星。每个数字必须是相同的星数。我只能使第一行有效；如图所示。我没有使用jQuery。仅香草javascript（纯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 = "*****";        }    }   }

Answer 1

您似乎要添加带有单选按钮的数字值作为文本的行，然后将每一行从数字转换为“ *”。为什么不在添加行之前转换为'*'？然后，您只需要一个功能。

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);

        }

    });

}

<div class="container-fluid">

        <div class="row">

            <input type="radio" name="gender" value="5" id="radio5"> 5<br>

            <input type="radio" name="gender" value="4" id="radio4"> 4<br>

            <input type="radio" name="gender" value="3" id="radio3"> 3<br>

            <input type="radio" name="gender" value="2" id="radio2"> 2<br>

            <input type="radio" name="gender" value="1" id="radio1"> 1<br>

            <input type="submit" value="enviar" id="btnBoton">

        </div>

    </div>

    <section class="lista-comentarios">

        <div class="container-fluid" id="contenedor-filas">

            <h1>Comment List</h1>

        </div>

    </section>