这里有什么问题？

Question

我构建了一个没有任何 html 的显示和隐藏密码应用程序，只是 html、head、body 元素和脚本元素作为练习，但这里有错误：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);它只是给我密码字段和按钮，当我单击按钮时没有任何反应。我认为功能有问题，但我不知道在哪里......

Answer 1

我试图修复你的代码，现在你可以尝试一下，它会按你的意愿工作。我已经使用单击事件侦听器而不是将其设置为元素。并用setAttribute替换了setAttributeNodes

const inputOne = document.createElement('input'),

      attrOne = document.createAttribute('type');

inputOne.setAttribute('type', 'password');

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);

btnOne.addEventListener('click', function(e){

  e.preventDefault();

if (inputOne.type == 'password') {

        inputOne.type = 'text';

        this.innerHTML = 'Hide Password';

 } else {

        inputOne.type = 'password';

    this.innerHTML = 'Show Password';

 }

});

Answer 2

尝试将您的onclick属性设置为字符串值。这是一个工作示例：

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);

function shHiPassword() {

  if (inputOne.type == 'password') {

    inputOne.type = 'text';

    btnOne.innerHTML = 'Hide Password';

  } else {

    inputOne.type = 'password'

    btnOne.innerHTML = 'Show Password';

  }

};

const attrTwo = document.createAttribute('onclick');

attrTwo.value = 'shHiPassword()';

btnOne.setAttributeNode(attrTwo);