Как вывести массив в html

Question

Как вывести массив в html, а то он выводится на миллисекунды и сразу же пропадает.

let btn = document.querySelector('button');

btn.addEventListener('click', function() {
  let inp = document.querySelector('input').value;
  let num = Number(inp);
  let span = document.querySelector('span');
  let result = [];

  while (num > 0) {
    result.unshift(num % 2);
    num = Math.floor(num / 2);
  }

  span.innerHTML = result.join('');
})

<h1>Конвертор двоичной системы</h1>
<div class="content">
  <form action="">
    <input placeholder="Цифра.." type="number" min="0" max="100" step="1">
    <button>enter</button>
  </form>
  <h1>Ответ: <span></span></h1>
</div>

Answer 1

А какой логический смысл помещать все данные в форму, если манипуляции происходят в JS? Вот форма и перезагружается. Уберите тег form и будет работать нормально

Answer 2

Нужно отменять отправку формы.

let btn = document.querySelector('button');

btn.addEventListener('click', function(e) {
  e.preventDefault(); // Отменяем отправку формы

  let inp = document.querySelector('input').value;
  let num = Number(inp);
  let span = document.querySelector('span');
  let result = [];

  while (num > 0) {
    result.unshift(num % 2);
    num = Math.floor(num / 2);
  }

  span.innerHTML = result.join('');
})

<h1>Конвертор двоичной системы</h1>
<div class="content">
  <form action="">
    <input placeholder="Цифра.." type="number" min="0" max="100" step="1">
    <button>enter</button>
  </form>
  <h1>Ответ: <span></span></h1>
</div>

Либо вообще избавиться от <form>

let btn = document.querySelector('button');

btn.addEventListener('click', function() {
  let inp = document.querySelector('input').value;
  let num = Number(inp);
  let span = document.querySelector('span');
  let result = [];

  while (num > 0) {
    result.unshift(num % 2);
    num = Math.floor(num / 2);
  }

  span.innerHTML = result.join('');
})

<h1>Конвертор двоичной системы</h1>
<div class="content">
  <input placeholder="Цифра.." type="number" min="0" max="100" step="1">
  <button>enter</button>
  <h1>Ответ: <span></span></h1>
</div>

БЛОГ НА HUSL

Как вывести массив в html

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