主页 / 问题 / 1600562
Accepted
user654927
Asked:2024-11-22 22:27:17 +0000 UTC2024-11-22 22:27:17 +0000 UTC

通过循环和点击事件输出星星

  • 772

原图

在此输入图像描述

如何使用点击事件在屏幕上显示六颗星？带有 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>

javascript

2 个回答

  1. Best Answer

    我们收到元素。让我们将 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>

    • 0

  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;
}
    • 0

相关问题