JSFiddle - React, Tailwind, and code Playground

by Zero Fx

HTML

<div class="wr">
	    	<input type="text" name="" value="" placeholder="Веддіть число не більше 10" id="namb_inpt">
	    	<button type="" id="btn_go" onclick="fNamb()">_Go_</button>
    	</div>

CSS

* {
  margin: 0;
  padding: 0;
  background-color: #ccc;
}
.wr {
  margin: 15px 0 0 15px;
}
#namb_inpt {
  width: 220px;
  height: 30px;
  font: bold 15px Arial;
  padding: 0 15px 0 17px;
  outline: none;
}
#btn_go {
  width: 45px;
  height: 45px;
  font: bold 15px Arial;
  outline: none;
}

JavaScript

function fNamb() {
  console.clear()
  console.log("code start");

  var inpt_val = document.getElementById('namb_inpt').value;

  function test_Nam() {
    if (isNaN(inpt_val)) {
      console.log("не число - введите число");
    } else {
      console.log("Вы ввели число , input не пустой");
      var loop_var = 10;
      for (var i = 1; i <= loop_var; i++) {
        if (i == inpt_val) {
          console.log("есть  совпадение "+i);
          return false;
        } else {
          console.log("не имеет совпадение с "+i);
        }
      }
    }	
  }

  if (inpt_val == false) {
    console.log("input пустой - введите число");
  } else {
    test_Nam();
  }

  console.log("code stop");
}