Необходимо реализовать следующее действия:
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;
}