亚洲在线久爱草,狠狠天天香蕉网,天天搞日日干久草,伊人亚洲日本欧美

為了賬號安全,請及時綁定郵箱和手機立即綁定
已解決430363個問題,去搜搜看,總會有你想問的

基于單選按鈕,如何根據單選值列出html文檔中的星星?

基于單選按鈕,如何根據單選值列出html文檔中的星星?

一只名叫tom的貓 2021-03-30 21:14:43
我正在嘗試執行以下操作:每次選擇單選按鈕時,這些按鈕都必須變成星星。每個數字必須是相同的星數。我只能使第一行有效;如圖所示。我沒有使用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 = "*****";        }    }   }
查看完整描述

2 回答

?
天涯盡頭無女友

TA貢獻1831條經驗 獲得超9個贊

您似乎要添加帶有單選按鈕的數字值作為文本的行,然后將每一行從數字轉換為“ *”。為什么不在添加行之前轉換為'*'?然后,您只需要一個功能。


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>


查看完整回答
反對 回復 2021-04-08
  • 2 回答
  • 0 關注
  • 207 瀏覽
慕課專欄
更多

添加回答

舉報

0/150
提交
取消
微信客服

購課補貼
聯系客服咨詢優惠詳情

幫助反饋 APP下載

慕課網APP
您的移動學習伙伴

公眾號

掃描二維碼
關注慕課網微信公眾號