Форум

рони · #11 (**permalink**) 04.08.2017, 19:43

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

laimas · #12 (**permalink**) 04.08.2017, 19:50

Сообщение от Василий777

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

А зачем их получать при вводе в них, если их значения нужны только при сравнении?

<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 · #13 (**permalink**) 04.08.2017, 19:50

Сообщение от рони

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

спасибо большое! то что надо

ещё бы с событиями этими разобраться..

рони · #14 (**permalink**) 04.08.2017, 19:57

Василий777,
не копируйте целиком сообщение!!! никчему это

Василий777 · #15 (**permalink**) 04.08.2017, 19:59

благодарю! теперь буду разбираться, как это всё работает..

Форум

Справочник

Discord чат

Курсы javascript