JSFiddle - React, Tailwind, and code Playground

by Pavel_FD2

HTML

<form>
  <div class="input">
    <input id="input" type="text" value="42">
  </div>
  <div class="btn">
    <button id="btn">Click</button>
  </div>
</form>

CSS

form {
  display: flex;
  
  div {
    padding: 10px;
  }
}

JavaScript

const input = document.querySelector("#input");
const btn = document.querySelector("#btn");

btn.addEventListener("click", function(e) {
  e.preventDefault();
  input.value++;
  input.focus();
});

input.addEventListener("blur", function(e) {
  console.log(e.target.value);
});