Javascript-форум (https://javascript.ru/forum/)
-   Элементы интерфейса (https://javascript.ru/forum/dom-window/)
-   -   Как вытащить инфу с инпутов? (https://javascript.ru/forum/dom-window/70026-kak-vytashhit-infu-s-inputov.html)

Василий777 04.08.2017 18:22

Как вытащить инфу с инпутов?
 
Необходимо реализовать следующее действия:

1. Ввести число в 1ый инпут.

2. Ввести число во 2ой инпут

3. После этого на месте знака ? появляется 3ий инпут, где необходимо ввести полученную сумму.

Так вот необходимо получать инфу с каждого инпута и в дальнейшем обрабатывать эту информацию, как сложение однозначных чисел с проверкой на на третий инпут(результат суммы). Только начал обучение JS, подскажите шаги реализации. Кидаю ссыль на песочницу, там HTML, CSS и JS


https://jsfiddle.net/akr8p3gv/

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
	<link rel="stylesheet" href="style.css">
	<script src="main.js"></script>
</head>
<body>
	<div id="wrapper">
		<div class="form">
			<input type="number" class="val one" min="1" max="9" onchange="">
			<div class="plus">
				+
			</div>
			<input type="number" min="1" max="9" class="val two">
			<div class="plus">
				=
			</div>
			<div class="question" id="question" onclick="question.style.display = 'none';
			result.style.display = 'block' ;">
				?
			</div>
			<input type="number" class="val result" id="result">
		</div>
	</div>
</body>
</html>


body {
	padding: 0;
	margin: 0;
}


#wrapper {
	width: 100%;
	padding-top: 100px;
}

.val {
	display: block;
	margin: 0 auto;
	width: 40px;
	height: 40px;
	float: left;
	font-size: 27px;
	text-align: center;
}

.plus {
	margin: 0 auto;
	text-align: center;
	width: 40px;
	height: 40px;
	float: left;
	padding-top: 9px;
	font-weight: bold;
	font-size: 27px;
}

.form {
	width: 300px;
	margin: 0 auto;

}

#question {
	width: 46px;
	height: 46px;
	float: left;
	padding: 8px 1px 1px 1px;
	text-align: center;
	box-sizing: border-box;
	font-size: 27px;
}

#result {
	display: none;
}

input::-webkit-outer-spin-button,
input::-webkit-inner-spin-button {
    -webkit-appearance: none;
    margin: 0;
}


.clearfix::after {
    content: " ";
    display: table;
    clear: both;
    float: left;
}


window.onload = function() {
var question = document.getElementById("question");
var result = document.getElementById("result");
var numOne = document.getElementsByClassName("val")[0];
var valOne = numOne.value;

}

Nexus 04.08.2017 18:53

Василий777, дальше в onload на инпуты с классом val повешай обработчик события «keyup», «blur» или «change» (на выбор), а в этом обработчике уже производи сложение.

рони 04.08.2017 19:16

Цитата:

Сообщение от Василий777
где необходимо ввести полученную сумму.

и что дальше?

Nexus 04.08.2017 19:21

Цитата:

Сообщение от рони (Сообщение 460666)
и что дальше?

Автор, вероятно хотел написать не "ввести" а "вывести".

UPD. Или все-таки нет...

laimas 04.08.2017 19:24

Цитата:

Сообщение от Nexus
Автор, вероятно хотел написать не "ввести" а "вывести".

Для этого выбранный тип элемента не годится, да и разрешать доступ к нему нельзя.

Василий777 04.08.2017 19:27

Цитата:

Сообщение от рони (Сообщение 460666)
и что дальше?

Цитата:

Сообщение от Nexus (Сообщение 460668)
Автор, вероятно хотел написать не "ввести" а "вывести".

UPD. Или все-таки нет...

В данном решение идёт проверка на сложение однозначных чисел чисел, человек сам вводит результат сложения, если ответ не верен, то интпут подсвечивается красным цветом(например бордер).

laimas 04.08.2017 19:31

Цитата:

Сообщение от Василий777
В данном решение идёт проверка на сложение однозначных чисел

Значит обработчик должен быть только у последнего поля ввода, который получает значения двух первых, складывает их и проверяет со значением последнего.

Василий777 04.08.2017 19:38

Цитата:

Сообщение от laimas (Сообщение 460671)
Значит обработчик должен быть только у последнего поля ввода, который получает значения двух первых, складывает их и проверяет со значением последнего.

А как нибудь поподробнее можете расписать? А как же тогда получать инфу введёную пользователем с первых 2ух инпутов? Сори за незнание, но хотелось бы понимания того, что нужно сделать.

Nexus 04.08.2017 19:39

Цитата:

Сообщение от laimas
Для этого выбранный тип элемента не годится, да и разрешать доступ к нему нельзя.

Что? «input» не годится в качестве контейнера принимающего от пользователя данные?
И что значит «разрешать доступ к нему нельзя»?

Nexus 04.08.2017 19:40

Цитата:

Сообщение от laimas (Сообщение 460671)
Значит обработчик должен быть только у последнего поля ввода, который получает значения двух первых, складывает их и проверяет со значением последнего.

Последнего «input'a» на странице нет, чтобы на него обработчик повесить.
Там либо его нужно сразу выводить на страницу, либо все-таки вешать на первые 2 поля обработчики.

Извиняюсь, он уже присутствует на странице, я не прав.


Часовой пояс GMT +3, время: 19:26.