title: How to clear text input and re focus in JavaScript
body: <p>In my code I want to make disable the button if text input field is empty. It was working fine. But when I add the code to clear and re focus the input box it makes the button enabled and this allows the user to create empty divs by clicking the button. Here I am attaching my whole JavaScript code, please someone help me with this to make this work as I want.</p>
  
  <p><strong>custom_script.js</strong></p>
  
  <pre><code>const subBtn = document.getElementById("btn");
  const inptTxt = document.getElementById("text");
  const contDiv = document.getElementById("container");
  
  //check input box is empty or not and enable Colorize button
  subBtn.disabled = true
  
  inptTxt.addEventListener('input', evt =&gt; {
      const value = inptTxt.value.trim()
  
      if (value) {
          inptTxt.dataset.state = 'valid'
          subBtn.disabled = false
      } else {
          inptTxt.dataset.state = 'invalid'
          subBtn.disabled = true
      }
  })
  
  var xhttp = new XMLHttpRequest();
  
  subBtn.addEventListener("click",function(){
  
      xhttp.onload=function() {
          var crd = document.createElement("div");
          var div = contDiv.getElementsByTagName("div");
          var crdCount = div.length;
          crd.setAttribute("id", "card" + crdCount);
          crd.innerHTML = inptTxt.value;
  
          //change html title with input text
          document.title = inptTxt.value;
  
          contDiv .appendChild(crd);
          document.getElementById("card" + crdCount).style.background = JSON.parse(this.responseText).color;  
  
          //getting inverse value of hex color
          const inv = (hex) =&gt; '#' + hex.match(/[a-f0-9]{2}/ig).map(e =&gt; (255 - parseInt(e, 16) | 0).toString(16).replace(/^([a-f0-9])$/, '0$1')).join('')
          const invert = () =&gt;
          document.querySelectorAll('circle')
          .forEach(c =&gt; 
          (hex = c.getAttribute('fill')) &amp;&amp; 
          c.setAttribute('fill', inv(hex))
          )
          var invColor = inv(JSON.parse(this.responseText).color);
  
          //setting the inverse value to card text
          var crdText = document.getElementById("card" + crdCount).innerHTML;
          var setColor = "&lt;span style='color:" + invColor + "'&gt;" + crdText + "&lt;/span&gt;";
          document.getElementById("card" + crdCount).innerHTML = setColor;
  
          //clear input and refocus
          inptTxt.value = "";
          inptTxt.focus();
          inptTxt.select();
      };
  
      xhttp.onerror=function() {
          var crd = document.createElement("div");
          var div = contDiv.getElementsByTagName("div");
          var crdCount = div.length;
          crd.setAttribute("id", "card" + crdCount);
          crd.innerHTML = inptTxt.value;
  
          //change html title with input text
          document.title = inptTxt.value;
  
          contDiv .appendChild(crd);
          document.getElementById("card" + crdCount).style.background = "#6d4298";  
  
          var crdText = document.getElementById("card" + crdCount).innerHTML;
          var setColor = "&lt;span style='color:#ffffff'&gt;" + crdText + "&lt;/span&gt;";
          document.getElementById("card" + crdCount).innerHTML = setColor;
      };
  
      xhttp.open("GET","http://api.creativehandles.com/getRandomColor");
      xhttp.send(); 
  
  })
  
  //submit quote using Enter key
  inptTxt.addEventListener("keyup", function(event) {
      if (event.keyCode === 13) {
      event.preventDefault();
      subBtn.click();
    }
  });
  </code></pre>