Javascript-форум - Как вытащить инфу с инпутов?

<!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>

Цитата:

Сообщение от рони (Сообщение 460676)

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

спасибо большое! то что надо:thanks: ещё бы с событиями этими разобраться..