Как поместить значение функции внутрь литерала шаблона?

#javascript #html

#javascript #HTML

Вопрос:

Я создаю систему комментариев, и требуется поместить звезды внутри литерала шаблона с целью, чтобы количество звезд оставалось рядом с именем человека. До сих пор значение показывает мне «неопределенный» скриншот системы комментариев к скриншотам

это код 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);
        }
    });
}
  

Ответ №1:

В вашей функции estrellitas() отсутствует оператор return и поэтому она вернет undefined . В противном случае ваш синтаксис для включения возвращаемых значений функции в строковые литералы шаблона правильный:

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