Как вытащить инфу с инпутов?
Необходимо реализовать следующее действия:
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;
}
|
Василий777, дальше в onload на инпуты с классом val повешай обработчик события «keyup», «blur» или «change» (на выбор), а в этом обработчике уже производи сложение.
|
Цитата:
|
Цитата:
UPD. Или все-таки нет... |
Цитата:
|
Цитата:
Цитата:
|
Цитата:
|
Цитата:
|
Цитата:
И что значит «разрешать доступ к нему нельзя»? |
Цитата:
Там либо его нужно сразу выводить на страницу, либо все-таки вешать на первые 2 поля обработчики. Извиняюсь, он уже присутствует на странице, я не прав. |
Василий777,
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style type="text/css">
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, .question.hide {
display: none;
}
.question.hide + #result{
display: inline;
}
input::-webkit-outer-spin-button,
input::-webkit-inner-spin-button {
-webkit-appearance: none;
margin: 0;
}
.clearfix::after {
content: " ";
display: table;
clear: both;
float: left;
}
.err {
border: #FF0000 2px solid;
}
</style>
<script>
window.addEventListener("DOMContentLoaded", function() {
var form = document.querySelector(".form"),
v = form.querySelectorAll(".val"),
question = form.querySelector(".question");
form.addEventListener("input", function() {
if (v[0].value && v[1].value) {
question.classList.add("hide");
if (v[2].value && v[2].value - v[0].value - v[1].value) v[2].classList.add("err");
else v[2].classList.remove("err")
} else {
question.classList.remove("hide");
v[2].value = "";
v[2].classList.remove("err")
}
})
});
</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" >
?
</div>
<input type="number" class="val result" id="result">
</div>
</div>
</body>
</html>
|
Цитата:
<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>
<script>
document.querySelector('#result').onchange = function() {
var sum = document.querySelector('.one').valueAsNumber + document.querySelector('.two').valueAsNumber;
alert(this.valueAsNumber == sum) //проверяем
}
</script>
|
Цитата:
|
Василий777,
не копируйте целиком сообщение!!! никчему это :) |
благодарю! теперь буду разбираться, как это всё работает..
|
| Часовой пояс GMT +3, время: 11:20. |