如何将函数的值放在模板文字中?

问题描述 投票:-1回答:1

我正在建立一个评论系统,并且需要将星星置于模板文字中,目的是星号的数量与人名相邻。直到现在,这个价值显示我“未定义”的剧本screenshot comment system

这是javascript代码

const txtNombre = document.getElementById("text-nombre");
const txtParrafo = document.getElementById("text-area");
const boton = document.getElementById("btnAgregar");
const listado = document.getElementById("contenedor-filas");
const radio = document.getElementsByName("rate");

boton.addEventListener("click", agregarALista);

function agregarALista() {
    let nombre = txtNombre.value;
    var valor = txtParrafo.value;

    const elHtml = document.createElement("div");

    elHtml.innerHTML = `
    <div class="row" id="fila-segunda">
        <div class = "col-6">
            ${nombre}
        </div>

        <div class = "col-6">
            ${estrellitas()}
        </div>
    </div>

    <div class="row" id="fila-tercera">
        <div class = "col">
            ${valor}
        </div>
    </div>
    `;
    listado.appendChild(elHtml);

    txtNombre.value = "";
    txtParrafo.value = "";
}




let estrellitas = function() {
    radio.forEach(function(elementos) {
        if (elementos.checked) {
            estrellas = document.createElement("h3");
            estrellas.setAttribute("class", "stars");
            let s = "";
            for (i = 0; i < elementos.value; i++) {
                s += "★";
            }
            estrellas.textContent = s;
            listado.appendChild(estrellas);
        }
    });
}
javascript html
1个回答
0
投票

你的函数estrellitas()缺少一个return语句,因此将返回undefined。否则,在字符串模板文字中包含函数返回值的语法是正确的:

let x = (a, b) => a > b;
let a = 10, b = 20;
console.log(`${a} is greater than ${b}? ${x(a, b)}`);
© www.soinside.com 2019 - 2024. All rights reserved.