使用 setAttribute 的 onClick 属性不起作用答案

【问题标题】：onClick property using setAttribute not working使用 setAttribute 的 onClick 属性不起作用
【发布时间】：2021-07-27 16:48:35
【问题描述】：

我是 JavaScript 和学习新手，我尝试仅使用 setattributes 和 createElements 创建元素，但这里 btn.setAttribute('onclick', 'fun()') 不起作用，可能是什么问题。

function code() {
    let head1 = document.getElementById('head')
    let lab = document.createTextNode('Enter')
    let input1 = document.createElement('input')
    let btn = document.createElement('button');
    let lab1 = document.createTextNode('Enter Button')
    input1.setAttribute('id', 'ind')
    btn.appendChild(lab1)
    btn.setAttribute('id', 'btn11')
    btn.setAttribute.onclick = function() { fun(); };

    head1.appendChild(lab)
    head1.appendChild(input1)
    head1.appendChild(btn)
}


function fun() {
    let head = document.getElementById('hi')
    para = document.createElement('p')
    txt = document.createTextNode('hi')
    para.appendChild(txt)
    head.appendChild(para)
}

<button onclick="code()">Enter</button>
<div id="head"></div>
<div id="hi"></div>

【问题讨论】：

标签： javascript python html jquery frontend

【解决方案1】：

setAttribute 是一种方法，但您正在使用它，就好像它是一个属性一样。 setAttribute 上没有 onclick。

你可以简单地使用：

  btn.onclick = fun();

或者：如果你真的想使用setAttribute()

btn.setAttribute('click', fun());

<script>
    function code() {
        let head1 = document.getElementById('head')
        let lab = document.createTextNode('Enter')
        let input1 = document.createElement('input')
        let btn = document.createElement('button');
        let lab1 = document.createTextNode('Enter Button')
        input1.setAttribute('id', 'ind')
        btn.appendChild(lab1)
        btn.setAttribute('id', 'btn11')
        btn.onclick = fun();

        head1.appendChild(lab)
        head1.appendChild(input1)
        head1.appendChild(btn)
    }

    
    function fun() {
        let head = document.getElementById('hi')
        para = document.createElement('p')
        txt = document.createTextNode('hi')
        para.appendChild(txt)
        head.appendChild(para)
    }


</script>
<body>
    <button onclick="code()">Enter</button>
    <div id="head"></div>
    <div id="hi"></div>
</body>

【讨论】：

当code() 被调用时，你正在调用fun()

【解决方案2】：

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
  </head>

  <body>
    <button onclick="code()">Enter</button>
    <div id="head"></div>
    <div id="hi"></div>

    <script>
      function code() {
        let head1 = document.getElementById("head");
        let lab = document.createTextNode("Enter");
        let input1 = document.createElement("input");
        let btn = document.createElement("button");
        let lab1 = document.createTextNode("Enter Button");
        input1.setAttribute("id", "ind");
        btn.appendChild(lab1);
        btn.setAttribute("id", "btn11");
        btn.addEventListener("click", function () {
          fun();
        });

        head1.appendChild(lab);
        head1.appendChild(input1);
        head1.appendChild(btn);
      }

      function fun() {
        let head = document.getElementById("hi");
        para = document.createElement("p");
        txt = document.createTextNode("hi");
        para.appendChild(txt);
        head.appendChild(para);
      }
    </script>
  </body>
</html>

【讨论】：