Javascript.RU

Создать новую тему Ответ
 
Опции темы Искать в теме
  #1 (permalink)  
Старый 12.12.2018, 10:01
Интересующийся
Отправить личное сообщение для AndriiS Посмотреть профиль Найти все сообщения от AndriiS
 
Регистрация: 05.09.2018
Сообщений: 28

Поймать то, что ввел юзер в 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, 12.12.2018 в 10:29.
Ответить с цитированием
  #2 (permalink)  
Старый 12.12.2018, 10:09
Аватар для рони
Профессор
Отправить личное сообщение для рони Посмотреть профиль Найти все сообщения от рони
 
Регистрация: 27.05.2010
Сообщений: 33,121

AndriiS,
после создания 'button' строка 31 добавить type
и строка 46 убрать лишние круглые скобки.
Ответить с цитированием
  #3 (permalink)  
Старый 12.12.2018, 10:31
Аватар для SuperZen
Профессор
Отправить личное сообщение для SuperZen Посмотреть профиль Найти все сообщения от SuperZen
 
Регистрация: 08.11.2017
Сообщений: 641

видимо, у тебя происходит сабмит при клике %)
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)
Ответить с цитированием
  #4 (permalink)  
Старый 12.12.2018, 10:31
Интересующийся
Отправить личное сообщение для AndriiS Посмотреть профиль Найти все сообщения от AndriiS
 
Регистрация: 05.09.2018
Сообщений: 28

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

Плюсище в карму. Спасибо!
Ответить с цитированием
  #5 (permalink)  
Старый 12.12.2018, 10:32
Интересующийся
Отправить личное сообщение для AndriiS Посмотреть профиль Найти все сообщения от AndriiS
 
Регистрация: 05.09.2018
Сообщений: 28

Большое спасибо, коллега! :-) Заработало!
Ответить с цитированием
  #6 (permalink)  
Старый 12.12.2018, 10:53
Аватар для рони
Профессор
Отправить личное сообщение для рони Посмотреть профиль Найти все сообщения от рони
 
Регистрация: 27.05.2010
Сообщений: 33,121

Сообщение от SuperZen
видимо, у тебя происходит сабмит
Сообщение от рони
после создания 'button' строка 31 добавить type
'button'
так на всякий случай, алтернатива
Сообщение от SuperZen
e.preventDefault()
Ответить с цитированием
Ответ



Опции темы Искать в теме
Искать в теме:

Расширенный поиск


Похожие темы
Тема Автор Раздел Ответов Последнее сообщение
Динамическое копирование значения из input в input с одинаковыми атрибутами name ami_moor jQuery 2 10.08.2016 17:02
Поюзайте хомячка Nanto Ваши сайты и скрипты 30 06.06.2011 22:16
Как (эффективно) изучать JavaScript? JSTalker Общие вопросы Javascript 33 23.12.2010 03:13
Как можно узнать что value в INPUT изменилось? moskrc jQuery 2 22.10.2010 09:06
Браузер доказывает что не видит функцию SleepWalker Общие вопросы Javascript 7 17.06.2009 23:14