Вывод звездочек через циклы и событие клик

Question

Как вывести шесть звездочек на экран с помощью события клик? Кол-во строк с 6ю звездочками зависит от цифры в инпуте. Нужно сделать через циклы.

let element = (elem) => document.querySelector(elem);
let but = element('.b-6');
let out = element('.out-6');
let inp = element('.i-6');
but.onclick = function t6() {
  for (let i = 1; i < 4; i++) {
    if (inp.value == 1) {
      out.innerHTML = '******';
    } else if (inp.value == 2) {
      out.innerHTML = '******' + '<br/>' + '******';
    } else if (inp.value == 3) {
      out.innerHTML = '******' + '<br/>' + '******' + '<br/>' + '******';
    }
  }
}

<input class="i-6" type="number" />
<div class="out-6">
</div>
<button class="b-6">Кнопка</button>

Answer 1

Получаем элементы. Преобразуем input.value в число. Очищаем наш контейнер и потом сам цикл

function generateStars() {
  const input = document.getElementById('numberInput');
  const output = document.getElementById('output');
  const number = parseInt(input.value, 10);
  
  output.innerHTML = '';

  if (!isNaN(number) && number > 0) {
    for (let i = 0; i < number; i++) {
      const paragraph = document.createElement('p'); 
      paragraph.textContent = '******';   
      output.appendChild(paragraph);
    }
  } else {
    alert('Введите корректное число больше 0.');
  }
}

<div>
    <input
      id="numberInput"
      type="text"
      placeholder="Введите число"
    />
    <button onclick="generateStars()">Сгенерировать</button>
    <div id="output"></div>
  </div>

Answer 2

Получаем из инпута значение, преобразуем к числу и запускаем цикл, который будет к текущему значению в контейнере добавлять нужную строку

let element = (elem) => document.querySelector(elem);
let but = element('.b-6');
let out = element('.out-6');
let inp = element('.i-6');
// Создаем функцию, которая будет обрабатывать событие клика
function t6() {
  out.innerHTML = ''; // Зачищаем контейнер
  for (let i = 0; i < Number(inp.value); i++) {
    out.innerHTML += '******<br/>' // Добавляем строки
  }
}
but.onclick = t6; // Вешаем обработчик на клик

<input class="i-6" type="number" />
<button class="b-6">Нарисовать *</button>
<div class="out-6"></div>

Что бы не мучить браузер, можно заменить функцию t6 вот так:

function t6() {
  let stars = ''
  for (let i = 0; i < Number(inp.value); i++) {
    stars += '******<br/>'
  }
  out.innerHTML = stars;
}

БЛОГ НА HUSL

Вывод звездочек через циклы и событие клик

Ответы (2 шт):