JS - 动态元素（按钮）在创建新的动态元素后更改分配给它的属性值。为什么？

Question

我有一个 'Save' 按钮。

单击 'Save' 按钮我在 JS 中创建了一个动态按钮。

动态按钮的名称由变量值格式化。

我将新动态按钮的 ID 属性设置为等于先前变量的值。

当我点击新的动态按钮时，它起作用了。它打印附加到它的变量的值。

问题：当我创建第二个动态按钮时，该按钮也有效。但是之前的按钮不再起作用了，出于某种原因它打印了变量的新值。


function saveNewProject(){
    userProject++;

    titleInputValue = document.getElementById("rightBottomContainerContentContainerContent1ElementId").value;

    newElement = document.createElement("button");

    newElement.setAttribute("type", "button");
    newElement.setAttribute("id", userProject);

    console.log(newElement);

    newElement.innerText = `${userProject} - ${titleInputValue}`;

    console.log(newElement);

    oldElement = document.getElementById("leftBottomContainerContentContainerContentElementId");

    oldElement.appendChild(newElement);

    newElementLine = document.createElement("br");
    oldElement.appendChild(newElementLine);

    console.log(newElement);

    newElement.addEventListener("click", function(){
        asd = newElement.getAttribute("id");

        console.log(asd);
        console.log(newElement);
    });
}

我是网站开发的新手，这是我的第 3 天。提前感谢您的帮助。

Answer 1

在事件处理程序中使用“this”

您的代码中存在初学者常犯的错误。每次添加新按钮时都会更新 newElement。并且所有按钮事件处理程序都使用最新值并显示最后添加的按钮的“id”。

要使其正常工作，您需要更改下面显示的代码行。它不使用 newElement，而是使用“this”。在事件处理程序中，“this”表示事件所附加的元素。所以 this.id returns 本身的 ID 而不是最后添加的按钮的 ID。

尝试代码片段以了解其工作原理。

// asd = newElement.getAttribute("id"); // <-- incorrect
asd = this.getAttribute("id");  // <-- correct

let userProject = 0;

function saveNewProject(){
    userProject++;

    titleInputValue = document.getElementById("rightBottomContainerContentContainerContent1ElementId").value;

    newElement = document.createElement("button");

    newElement.setAttribute("type", "button");
    newElement.setAttribute("id", userProject);

    console.log(newElement);

    newElement.innerText = `${userProject} - ${titleInputValue}`;

    //console.log(newElement);

    oldElement = document.getElementById("leftBottomContainerContentContainerContentElementId");

    oldElement.appendChild(newElement);

    newElementLine = document.createElement("br");
    oldElement.appendChild(newElementLine);

    //console.log(newElement);

    newElement.addEventListener("click", function(){
    
       
        // asd = newElement.getAttribute("id"); // <-- incorrect
        asd = this.getAttribute("id");  // <-- correct


        console.log("You clicked button " + asd);
        //console.log(newElement);
    });
}

<div id="leftBottomContainerContentContainerContentElementId" value="left">

    <input id="rightBottomContainerContentContainerContent1ElementId" value="title" />

    <button onclick="saveNewProject()">Save</button>
    
    <br/>
  
</div>

JS - 动态元素（按钮）在创建新的动态元素后更改分配给它的属性值。为什么？

JS - Dynamic element (button) changes the attribute's value assigned to it after creating a new dynamic element. Why?

javascript

css

variables

element

createelement