输入验证码，显示另一个块 [英] Input validation number with display another block

问题描述

我有输入字段，需要检查数字，如果输入的值是number - 另一个div .hidden 应该显示：block; 此外，我有四个block-onclick上的多个eventlistener这个 .hidden 块是可见的，如果它可能将此事件与表单输入事件。

 ;（function（）{var amount_list = document。 querySelectorAll（'。form-row .donate'）; var amount_array = [] .slice.call（document.querySelectorAll（。form-row .donate））; var donerForm = document.getElementById（'hidden'）; var inputDonateField = document.getElementById（'donate-price'）。value; var inputNumber = / ^ [0-9] + $ /; var onClickFormVisible = function（）{donerForm.style.display =block;}; var amoutn_array = amount_array.map（function（e）{return e.addEventListener（'click'，onClickFormVisible）; }）; // var onclickInputNumberDonate = function（）{// //如果x不是数字或// if（isNaN（inputDonateField）&& inputDonateField.length> 0）{// console.log（inputDonateField）; // return onClickFormVisible（）; // //} else {// return false; //} //}; function validateForm（）{if（inputDonateField === null || inputDonateField ===）{alert（Name must be filled out）; return false; }}}）（）;  

  #hidden {display： none;}  

 < div class =form-row > < label>标签< / label> < div class =donate> 50kr< / div> < div class =donate> 100kr< / div> < div class =donate> 200kr< / div> < div class =donate> 500kr< / div>< / div>< div class =form-row> < div class =form-col doner-price> < label for =donate-price> only number< input type =textid =donate-pricename =namevalue => < / label> < / div>< / div>< div id =hidden> TExt here< / div>  p> 
 
解决方案
现在使用keyup输入事件为我工作。
 
 
 
 
 
 
 （function（）{var amount_list = document.querySelectorAll（'。form-row .donate'）; // node-list var amount_array = [] .slice.call（document.querySelectorAll（。form-row .donate））; //节点列表到数组var donerForm = document.getElementById（'hidden'）; var inputDonateField = document.getElementById（'donate-price '）; var inputNumber = / ^ [0-9] + $ /; var onClickFormVisible = function（）{donerForm.style.display =block;}; var onInputTypeNumber = function（）{if（inputNumber.test .value））{donerForm.style.display =block;} else {return false; }}; // onclick event for each amount images var amoutn_array = amount_array.map（function（e）{return e.addEventListener（'click'，onClickFormVisible）;}）; // input event only if value === number inputDonateField.addEventListener（keyup，onInputTypeNumber）;}）（）;  
 
  .form-row {display：flex; margin：2rem;}。donate {background：＃007DBD; width：75px; height：50px; padding：1rem; border：1px solid black; } #hidden {display：none; width：100px; height：150px;背景：灰色颜色：黑色; text-align：center; padding：2rem;}  
 
 < div class = -row> < label>标签< / label> < div class =donate> 50kr< / div> < div class =donate> 100kr< / div> < div class =donate> 200kr< / div> < div class =donate> 500kr< / div>< / div>< div class =form-row> < div class =form-col doner-price> < label for =donate-price> only number< input type =textid =donate-pricename =namevalue => < / label> < / div>  
 
 
 
I've got the input field, need to check the number only, if value of input is number - another div .hidden should display: block; Also I've got multiple eventlistener  on four block- onclick this .hidden block is visible, if it possible combine this event with the form input event.



;
(function() {
  var amount_list = document.querySelectorAll('.form-row .donate');
  var amount_array = [].slice.call(document.querySelectorAll(".form-row .donate"));
  var donerForm = document.getElementById('hidden');
  var inputDonateField = document.getElementById('donate-price').value;
  var inputNumber = /^[0-9]+$/;
  var onClickFormVisible = function() {
    donerForm.style.display = "block";

  };

  var amoutn_array = amount_array.map(function(e) {
    return e.addEventListener('click', onClickFormVisible);
  });


  // var onclickInputNumberDonate = function() {
  //     // If x is Not a Number or
  //     if (isNaN(inputDonateField) && inputDonateField.length > 0) {
  //         console.log(inputDonateField);
  //         return onClickFormVisible();
  //
  //     } else {
  //         return false;
  //     }
  // };


  function validateForm() {
    if (inputDonateField === null || inputDonateField === "") {
      alert("Name must be filled out");
      return false;
    }
  }
})();

#hidden {
  display: none;
}

<div class="form-row">
  <label>Label</label>
  <div class="donate">50kr</div>
  <div class="donate">100kr</div>
  <div class="donate">200kr</div>
  <div class="donate">500kr</div>
</div>
<div class="form-row">
  <div class="form-col doner-price">
    <label for="donate-price">
      only number
      <input type="text" id="donate-price" name="name" value="">
    </label>
  </div>
</div>

<div id="hidden">TExt here</div>



解决方案
It's working for me now with keyup input event.



(function() {
    var amount_list = document.querySelectorAll('.form-row .donate'); //node-list
    var amount_array = [].slice.call(document.querySelectorAll(".form-row .donate")); //node-list to array
    var donerForm = document.getElementById('hidden');
    var inputDonateField = document.getElementById('donate-price');
    var inputNumber = /^[0-9]+$/;


    var onClickFormVisible = function() {
        donerForm.style.display = "block";
    };
    var onInputTypeNumber = function() {
        if (inputNumber.test(inputDonateField.value)) {
            donerForm.style.display = "block";
        } else {
            return false;
        }
    };
    //onclick event for each amount images
    var amoutn_array = amount_array.map(function(e) {
        return e.addEventListener('click', onClickFormVisible);
    });
    //input event only if value === number
    inputDonateField.addEventListener("keyup", onInputTypeNumber);

})();

.form-row{display:flex; margin:2rem;}
.donate{
background: #007DBD;
  width: 75px;
  height:50px;
  padding: 1rem;
  border: 1px solid black;
 
}
#hidden{
display:none; 
  width: 100px;
  height:150px;
  background: gray;
  color: black;
  text-align:center;
  padding: 2rem;
}

<div class="form-row">
  <label>Label</label>
  <div class="donate">50kr</div>
  <div class="donate">100kr</div>
  <div class="donate">200kr</div>
  <div class="donate">500kr</div>
</div>
<div class="form-row">
  <div class="form-col doner-price">
    <label for="donate-price">
      only number
      <input type="text" id="donate-price" name="name" value="">
    </label>
  </div>
</div>

<div id="hidden">Only if Input value === to number.You are see this block;</div>





                        
这篇关于输入验证码，显示另一个块的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！