Javascript-форум - Поймать то, что ввел юзер в input

Javascript-форум (https://javascript.ru/forum/)

- Общие вопросы Javascript (https://javascript.ru/forum/misc/)

- - Поймать то, что ввел юзер в input (https://javascript.ru/forum/misc/76185-pojjmat-chto-vvel-yuzer-v-input.html)

Поймать то, что ввел юзер в input

Привет!

Помогите пожалуйста с такой задачей: Юзер вводит собщения в три поля. Цифры например. По нажатию кнопки значения забираются и передаются в константы (пока для наглядности мне достаточно в консоль или в алерт).

П.С. Элементы HTML дерева мне нужно создать из js, как я и сделал. Но видать что-то там не так.

Вот то, что я написал:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <link rel="stylesheet" href="styles.css">
    <title>Document</title>
</head>
<body>
    <div id="root"></div>
    <script src="js.js"></script>
</body>
</html>

'use strict';

const root = document.querySelector ('#root');

// modal form
const modalForm = document.createElement ('div');
modalForm.classList.add ('modal');
root.append (modalForm);

// input room parameters form
const inputLengthForm = document.createElement ('form');
modalForm.append (inputLengthForm);

//input room length form
const inputLengthField = document.createElement ('input');
inputLengthField.id = 'id1';
// inputLengthField.value = '';
inputLengthForm.append (inputLengthField);
//
const inputWidthField = document.createElement ('input');
inputWidthField.id = 'id2';
// inputLengthField.value = '';
inputLengthForm.append (inputWidthField);
//
const inputHighField = document.createElement ('input');
inputHighField.id = 'id3';
// inputLengthField.value = '';
inputLengthForm.append (inputHighField);

// button
const btn = document.createElement ('button');
btn.classList.add ('button');
btn.textContent = 'Показать сумму';
inputLengthForm.append (btn);

function getNumber () {
  const getElementId1 = parseInt (document.getElementById ('id1').value);
  const getElementId2 = parseInt (document.getElementById ('id2').value);
  const getElementId3 = parseInt (document.getElementById ('id3').value);

  console.log (getElementId1);
  console.log (getElementId2);
  console.log (getElementId3);
}

btn.addEventListener ('click', getNumber ());

AndriiS,
после создания 'button' строка 31 добавить type
и строка 46 убрать лишние круглые скобки.

видимо, у тебя происходит сабмит при клике %)

const root = document.querySelector('#root')
root.innerHTML = `<div class="modal">
  <form>
    <input id="id1" type="text" />
    <input id="id2" type="text" />
    <input id="id3" type="text" />
    <button id="btn" class="button">Показать сраную сумму</button>
  </form>
</div>`

document.getElementById('btn').addEventListener('click', e => {
  e.preventDefault() // не делать сабмит формы
  isNumeric = (value) => /^-{0,1}\d+$/.test(value) // значение это число?
  getValue = (id) => {
    const value = document.getElementById(id).value
    return this.isNumeric(value) ? parseInt(value) : null // если число, то вернется число, а если нет, то вернется null
  }
  const values = [this.getValue('id1'), this.getValue('id2'), this.getValue('id3')] // занесем все значения полей в массив
  const summ = values.reduce((p, c) => p === null ? c : c === null ? p : p + c) // посчитаем сумму, сумма будет только из чисел
  const valid = values.every(v => v !== null) // все ли значения полей числа?
  console.log(valid, summ)
}, false)

рони,
волшебник! :-)

Плюсище в карму. Спасибо!

Большое спасибо, коллега! :-) Заработало!

Цитата:

Сообщение от SuperZen

видимо, у тебя происходит сабмит

Цитата:

Сообщение от рони

после создания 'button' строка 31 добавить type

'button'
так на всякий случай, алтернатива

Цитата:

Сообщение от SuperZen

e.preventDefault()