Василий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>
|