这里有什么问题？

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替换了setAttributeNodesconst 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);