JSFiddle - React, Tailwind, and code Playground

by colorkid

HTML

<body>
<input type="number" name="num" id="number">
<div class="block-none block-plus">Нажал плюс</div>
<div class="block-none block-minus">Нажал минус</div>
</body>

CSS

body{
  font-family: sans-serif;
}

.block-plus,
.block-minus{
  display:flex;
  align-items:center;
  width: 90%;
  height: 30px;
  border: 1px solid gray;
  border-radius: 3px;
  margin:10px 0 10px 0;
  padding-left: 10px;
}
.block-none{
  display: none;
}

JavaScript

var numberInput = document.getElementById("number");
var plusBlock = document.querySelector(".block-plus");
var minusBlock = document.querySelector(".block-minus");



numberInput.onchange = function() {
	if(numberInput.value > 0){
		plusBlock.classList.remove("block-none");
		minusBlock.classList.add("block-none");
	}
	if(numberInput.value < 0){
		minusBlock.classList.remove("block-none");
		plusBlock.classList.add("block-none");
	}
 };