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

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

转载作者：行者123 更新时间：2023-12-02 23:56:05

26

4

我正在尝试执行以下操作:每次您选择单选按钮时，这些按钮都必须变成星星。每个数字必须具有相同的星星数。

我只能使第一行起作用；如图所示。

我没有使用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 = "*****";
        }
    }   
}

<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
    <!-- Bootstrap CSS -->
    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css"
        integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
    <title>Review System</title>
    <!-- style sheet -->
    <!-- Font Awesome Icon Library -->
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
</head>


<body>

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



    <script src="https://code.jquery.com/jquery-3.3.1.slim.min.js"
        integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo"
        crossorigin="anonymous"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js"
        integrity="sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1"
        crossorigin="anonymous"></script>
    <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"
        integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM"
        crossorigin="anonymous"></script>
    <script src="pruebas.js"></script>
</body>

</html>

感谢你们的帮助。

最佳答案

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

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>

关于javascript - 基于单选按钮，如何根据单选值列出html文档中的星星？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/55386927/

26

4

0

文章推荐： azure - 如何导出Azure工作簿的ARM模板？

文章推荐： Powershell 3克隆一个对象有意外的结果 - 影响其他对象

文章推荐： SQL Server : hex to base64

文章推荐： iphone - 如何查看ExtAudioFileRead的结果？

javascript - 列出/输出来自单个输入的逗号分隔值
如何从单个输入字段中的逗号分隔值输出列表(无论是作为单个值还是作为数组)？示例用户在文本输入字段中输入以下内容:Steve、Bruce、Matt、Natasha、Peter 结果: 史蒂夫布鲁斯
列出 Jena 中实例的对象属性
如何列出与 Jena 中的实例关联的所有对象属性？例如:Person 有一个名为“hasVehicle”的对象属性，它与类 Vehicle 相关联最佳答案合适的 Jena 方法是 OntClas
列出 Jena 中实例的对象属性
如何列出与 Jena 中的实例关联的所有对象属性？例如:Person 有一个名为“hasVehicle”的对象属性，它与类 Vehicle 相关联最佳答案合适的 Jena 方法是 OntClas
python - 'builtin_function_or_method' 列出
我知道 Python 是一种动态语言，但下面的代码让我很困扰。我有下面的简单程序，它有一些辅助函数来包装命令执行。 EventLoaderToVerticaHelper 是一个有两个方法的辅助类，所
java - 列出 ConcurrentModificationException
我有以下代码 public void saveProjects(List proj) throws DatabaseException { for (Project listItems: pr
c# - 列出<>自己的比较器
我有一个列表，其中元素是: struct element { double priority; int value;
git - 列出 pull 请求的提交
我看到对于 pull 请求的提交，根据文档最大限制为 250:List commits on a Pull Request如果 pull 请求超过 250 次提交，则建议使用另一个端点:List Co
django - 列出 django 项目的应用程序
我是 django 的新手，我想列出一个 django 项目的应用程序，例如: FeinCMS 我知道 startapp 会为应用程序创建目录结构。请问有没有函数或者文件可以获取应用列表。以Fein
hibernate - 列出 Hibernate 中使用了哪些设计模式？
你能列出所有在 Hibernate 框架中使用的设计模式吗？我了解一些设计模式，如 DAO、ORM 等。如果可能的话，一些例子。最佳答案 Hibernate 中使用的设计模式: 领域模型模式——
postgresql - 列出 postgresql 表中的所有非空约束
我正在尝试在终端中使用 psql 来查找数据库中所有可为空的列。如果我使用 select * from information_schema.check_constraints; 我得到如下信息 c
wso2 - 列出 WSO2 碳基服务器使用的管理服务？
您可以使用以下步骤列出 WSO2 碳基产品使用的所有管理服务。使用 OSGI 控制台启动服务器。转至 /bin 使用命令 shell 。 i) 例如:Linux sh wso2server.s
sql - 列出 Hibernate 中的所有表
我想列出数据库中的所有表名。我的应用程序必须独立于 DBMS。不同的 DBMS 有不同的命令来列出表，例如: PstgreSQL: SELECT * FROM pg_catalog.pg_table
emacs - 列出 emacs 中的所有顶级全局变量
主要是为了我自己的启发，我试图列出当前 Emacs session 中加载的所有全局变量。我正在考虑做的是生成一个包含所有列出的功能的 HTML 文件。当然，定义函数、var 等的文件也很有用。 em
列出 :append with list comprehensions
我如何定义 lists:append具有列表理解功能？我想要类似的东西 1> append([[1, 2, 3], [a, b], [4, 5, 6]]). [1,2,3,a,b,4,5,6] 最佳
powershell - 列出 AD 用户的组成员身份
使用以下 Powershell 代码段，我可以获取当前用户的组成员名称: $groups = [System.Security.Principal.WindowsIdentity]::GetCurre
docker - 列出 Docker 容器的卷
如何列出 Docker 容器的所有卷？我知道它应该很容易获得，但我找不到方法。另外，是否可以获取已删除容器的卷并将其删除？最佳答案您可以使用 docker ps，获取容器 ID 并写入: $ d
c++ - 列出 Win32 设备命名空间的内容
来自微软独库: The "\\.\" prefix will access the Win32 device namespace instead of the Win32 file namespace
c# - 列出 dll 中使用的命名空间
这个问题在这里已经有了答案: 9年前关闭。 Possible Duplicate: Finding all Namespaces in an assembly using Reflection (Do
cucumber - 列出 Cucumber 中所有可用的标签
是否有命令行选项可以列出您的 Cucumber 测试套件中的所有标签？例如，我想要这样的东西: cucumber --show-tags foo.feature 那会给我类似的东西: @ci @de
firebird - 列出 Firebird 数据库的所有未使用的域
有没有一种快速的方法来列出为数据库定义的所有实际上没有被任何字段使用的 Firebird 域？我有一个包含许多表和许多域的大型数据库，似乎其中很多不再使用，所以我想是时候进行清理了! 我认为这可以通过

首页

博学

6Ren·AI

商城

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