iNeextt
@iNeextt
Junior Front end Developer

Как написать функцию, которая создаёт N количество HTML элементов?

Я хочу написать функцию, которая принимает в себя параметр "count", и возвращает столько HTML элементов, сколько передали в count

Например:
count = 3

return svg (3 раза)

Я сделал это так:
function createStars(count) {
        const star = `
            <span>
                <svg width="15" height="13" viewBox="0 0 15 13" fill="none"
                    xmlns="http://www.w3.org/2000/svg">
                    <path
                        d="M7.49777 0L9.60005 4.23718L14.2772 4.92164L10.8875 8.22991L11.6861 12.8908L7.49777 10.6907L3.30949 12.8908L4.10802 8.22991L0.718262 4.92164L5.41176 4.23718L7.49777 0Z"
                        fill="#FFCD1D" />
                </svg>
            </span>
        `;

        for (let i = 0; i <= count; i++) {
            return star;
        }
    }


Но почему-то на сайте отображается всего 1 звёздочка:
617956cbc0adb497919470.png

Подскажите пожалуйста, где ошибка в моём коде, и как было бы правильнее написать такую функцию?
  • Вопрос задан
  • 100 просмотров
Решения вопроса 2
Rsa97
@Rsa97
Для правильного вопроса надо знать половину ответа
После первого встреченного return, то есть ещё на первой итерации цикла, функция завершится.
const star = `
  <span>
    <svg width="15" height="13" viewBox="0 0 15 13" fill="none" xmlns="http://www.w3.org/2000/svg">
    <path
      d="M7.49777 0L9.60005 4.23718L14.2772 4.92164L10.8875 8.22991L11.6861 12.8908L7.49777 10.6907L3.30949 12.8908L4.10802 8.22991L0.718262 4.92164L5.41176 4.23718L7.49777 0Z"
      fill="#FFCD1D"
    />
  </svg>
</span>`;

const createStars = (num) => star.repeat(num);
Ответ написан
Aleksandr-JS-Developer
@Aleksandr-JS-Developer Куратор тега JavaScript
Лучше проще, чем никогда
function createStars(count = 1) {
        const star = `
            <span>
                <svg width="15" height="13" viewBox="0 0 15 13" fill="none"
                    xmlns="http://www.w3.org/2000/svg">
                    <path
                        d="M7.49777 0L9.60005 4.23718L14.2772 4.92164L10.8875 8.22991L11.6861 12.8908L7.49777 10.6907L3.30949 12.8908L4.10802 8.22991L0.718262 4.92164L5.41176 4.23718L7.49777 0Z"
                        fill="#FFCD1D" />
                </svg>
            </span>
        `;

       return star.repeat(count);
    }
Ответ написан
Комментировать
Пригласить эксперта
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Войти через центр авторизации
Похожие вопросы