Input Validation Number With Display Another Block

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 bloc

Solution 1:

Most browsers support type="number", can also have specified ranges with the min and max attributes, and can use the step attribute to accept only certain numbers (for example whole numbers).

<inputtype="number"min="0"max="50" step="1" />

On submit of the form, you'll still want to verify of course. IsNan() is useful for filtering out some inputs. Comparing against a regex like new RegExp('^[0-9]+$'); is a safe bet.

As for:

if it possible combine this event with the form input event.

I don't quite know what you're asking. If you are asking how to validate on both onclick and onsubmit events, just create a function for the validation, like validateInput() and call it for onclick and onsubmit.

element.onclick = function() {
  if (isValidInput(inputValue)) {  
    // More code here
  }
}

form.onsubmit = function() {
  if (isValidInput(inputValue)) {  
    // More code here
  }
}

functionisValidInput(inputValue) {
  // Check that input is valid// Return true / false
}

Solution 2:

It's working for me now with keyup input event.

(function() {
    var amount_list = document.querySelectorAll('.form-row .donate'); //node-listvar amount_array = [].slice.call(document.querySelectorAll(".form-row .donate")); //node-list to arrayvar 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 {
            returnfalse;
        }
    };
    //onclick event for each amount imagesvar 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;
}

<divclass="form-row"><label>Label</label><divclass="donate">50kr</div><divclass="donate">100kr</div><divclass="donate">200kr</div><divclass="donate">500kr</div></div><divclass="form-row"><divclass="form-col doner-price"><labelfor="donate-price">
      only number
      <inputtype="text"id="donate-price"name="name"value=""></label></div></div><divid="hidden">Only if Input value === to number.You are see this block;</div>