title: What is the wrong here?
body: <p>I build a show &amp; hide password application without any html just html, head, body elements and of course script element as a practice but there is wrong here :</p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>const inputOne = document.createElement('input');
  const attrOne = document.createAttribute('type');
  attrOne.value = 'password';
  inputOne.setAttributeNode(attrOne);
  
  const btnOne = document.createElement('button');
  btnOne.innerHTML = 'Show Password';
  document.body.appendChild(inputOne);
  
  const BRBetween = document.createElement('br');
  const BRsBetween = document.createElement('br');
  document.body.appendChild(BRBetween);
  document.body.appendChild(BRsBetween);
  document.body.appendChild(btnOne);
  
  const shHiPassword = function shHiPass() {
    if (inputOne.type == 'password') {
      inputOne.type = 'text';
      inputTwo.innerHtml = 'Hide Password';
    } else {
      inputOne.type = 'password'
  
      inputTwo.innerHtml = 'Show Password';
    }
  };
  
  const attrTwo = document.createAttribute('onclick');
  attrTwo.value = shHiPassword;
  btnOne.setAttributeNode(attrTwo);</code></pre>
  </div>
  </div>
  </p>
  
  <p>its just give me password field and the button , when I click the button no thing happen .</p>
  
  <p>I think the wrong in the function but I don't know where ...</p>