Question

所以我还不熟悉编码，当我发现一些可能是我有点愚蠢并且不了解什么是完全正在进行的事情时，我只是编写相当随机的东西，但我想我会来这里问一下，为什么生成的按钮不会记录＆＃34;测试＆＃34;到控制台，但原来做了，我做错了什么？

＆＃13;

function newButton() {
  var btn = document.createElement("button");
  btn.id = "button";
  var btnText = document.createTextNode("Click me");
  btn.appendChild(btnText);
  document.body.appendChild(btn);
  document.getElementById("button").onclick = console.log("test");
}

＆＃13;

<button id="addButton" onclick="newButton();">Add a button</button>

＆＃13;

非常感谢

Answer 1

您的代码至少有一个问题是您有许多具有相同ID“按钮”的按钮。我没有比这更深入了解这一点。

<body>

<button id="button">Click me</button><button id="button">Click me</button><button id="button">Click me</button><button id="button">Click me</button><button id="button">Click me</button><button id="button">Click me</button><button id="button">Click me</button><button id="button">Click me</button></body>

Answer 2

function newButton() {
  var button = document.createElement("button");
  button.innerHTML = "Click Me";

  // you have a reference to the button here, so add a handler to it
  button.addEventListener('click', () => console.log('test'));

  document.querySelector('#newButtons').appendChild(button);
}

<button id="addButton" onclick="newButton();">
    Add a button</button>
<div id="newButtons"></div>

Answer 3

重命名函数中的按钮id并添加onClick函数调用。有两个按钮具有相同的ID＆＃39;按钮＆＃39;。重命名其中任何一个ID并添加.onClick函数。它会起作用

function newButton() {
        var btn = document.createElement("button");
        btn.id = "buttonnew";
        var btnText = document.createTextNode("Click me");
        btn.appendChild(btnText);
        document.body.appendChild(btn);
        document.getElementById("buttonnew").onclick = function() { 
  console.log("test"); };
    }

Answer 4

您的主要问题在于onclick功能的newButton作业。

你调用 console.log("test") 返回undefined ，因此"test"会被记录到控制台并返回值从日志中分配，而不是记录功能，换句话说：

document.getElementById("button").onclick = undefined // console.log(...) returns undefined;

你需要将你的电话包裹在另一个功能中：

function newButton() {
    var btn = document.createElement("button");
    btn.id = "button";
    var btnText = document.createTextNode("Click me");
    btn.appendChild(btnText);
    document.body.appendChild(btn);
    document.getElementById("button").onclick = function(){
        console.log("test")
    }
}

<button id="addButton" onclick="newButton();">Add a button</button>

通过此更改功能：

function(){
    console.log("test")
}

只要按下按钮，就会调用

。

你的下一个问题是你正在使用getElementById，如果你多次添加按钮，它们都会有相同的Id，只有第一个会有事件处理程序，你可以通过添加点击btn而不是按下它的ID：

function newButton() {
    var btn = document.createElement("button");
    btn.id = "button";
    var btnText = document.createTextNode("Click me");
    btn.appendChild(btnText);
    btn.onclick = function(){
        console.log("test")
    }
    document.body.appendChild(btn);
}

<button id="addButton" onclick="newButton();">Add a button</button>

我在新按钮上添加了一个onclick属性，但它只适用于旧按钮

4 个答案: