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

发布于 2025-01-18 23:32:40 字数 1150 浏览 2 评论 0原文

我有一个“保存”按钮。

点击“保存”按钮我在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);
    });
}

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

原文

I have a 'Save' button.

On-click 'Save' button I create a dynamic button in JS.

The name of the dynamic button is formatted by the value of a variable.

I set the new dynamic button's ID attribute to be equal to the value of the previous variable.

When I click the new dynamic button it works. It prints the value of the variable attached to it.

Problem: When I create a second dynamic button, that button also works. But the previous button does not work anymore, for some reason it prints the new value of the variable.


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

I am new to website development, this is my 3rd day. Thank you for your help in advance.

分享到QQ

分享到微博

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

需要登录才能够评论，你可以免费注册一个本站的账号。

叶落知秋 2025-01-25 23:32:41

在您的活动处理程序内使用“此”

您的代码中有一个常见的初学者错误。每次添加新按钮时，都会更新Newlement。所有按钮事件处理程序都使用最新值，并显示最后一个按钮的“ ID”。

为了使其正常工作，您将需要更改下面显示的代码行。它使用“此”而不是新内容。在事件处理程序中，“此”是指附加事件的要素。因此，此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>

Use "this" inside your event handler

There is a common beginner's mistake in your code. newElement is updated each time you add a new button. And all the button event handlers use the most recent value and display the "id" of the last button added.

To make it work, you will need to change the line of code shown below. Rather than newElement, it uses "this". And within an event handler, "this" means the element to which the event is attached. So this.id returns the ID of itself rather than of the last button added.

Try the code snippet to see how it works.

// 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>

回复收藏 0 原文

~没有更多了~