如何将函数的值放入模板文字中？

Question

Im making a comment system and is required to put the stars inside of template literal with the purpose that the number of stars stay next to the name of the person. Until now the value is showing me "undefined" screenshoot screenshot comment system

this is the javascript code

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

Answer 1

Your function estrellitas() is missing a return statement and will therefore return undefined . Otherwise, your syntax for including function return values in string template literals is correct:

 let x = (a, b) => a > b; let a = 10, b = 20; console.log(`${a} is greater than ${b}? ${x(a, b)}`);