基于单选按钮，如何根据单选值列出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(){&nbsp; &nbsp; radio.forEach(function(elementos){&nbsp; &nbsp; &nbsp; &nbsp; if(elementos.checked)&nbsp; &nbsp; &nbsp; &nbsp; {&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; estrellas = document.createElement('h3');&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; let s = '';&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; for (let i = 0; i < elementos.value; i++) {&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; s += '*';&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; }&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;&nbsp;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; estrellas.textContent = s;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; listado.appendChild(estrellas);&nbsp; &nbsp; &nbsp; &nbsp; }&nbsp; &nbsp; });}<div class="container-fluid">&nbsp; &nbsp; &nbsp; &nbsp; <div class="row">&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <input type="radio" name="gender" value="5" id="radio5"> 5<br>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <input type="radio" name="gender" value="4" id="radio4"> 4<br>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <input type="radio" name="gender" value="3" id="radio3"> 3<br>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <input type="radio" name="gender" value="2" id="radio2"> 2<br>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <input type="radio" name="gender" value="1" id="radio1"> 1<br>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <input type="submit" value="enviar" id="btnBoton">&nbsp; &nbsp; &nbsp; &nbsp; </div>&nbsp; &nbsp; </div>&nbsp; &nbsp; <section class="lista-comentarios">&nbsp; &nbsp; &nbsp; &nbsp; <div class="container-fluid" id="contenedor-filas">&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <h1>Comment List</h1>&nbsp; &nbsp; &nbsp; &nbsp; </div>&nbsp; &nbsp; </section>