Unable to get asynchronous child spawning in JavaScript

Question

I'm trying to format this code in such a way that when a user clicks a button, new input fields each with a redirect button gets inserted asynchronously into the un-ordered list, it worked up until i added the redirect button to also be inserted upon each click of the spawn button. Here is my JS code...

function spawnSilly()
        {
            var div = document.createElement("DIV");
            var input = document.createElement("INPUT");
            var button = document.createElement("BUTTON");
            var att1 = document.createAttribute("type")
            var att2 = document.createAttribute("placeholder")
            var att3 = document.createAttribute("type")
            var att4 = document.createAttribute("onClick")
            att1.value = "text"
            att2.value = "Title"
            att3.value = "button"
            att4.value = "redirect()"
            input.setAttributeNode(att1)
            input.setAttributeNode(att2)
            button.setAttribute(att3)
            button.setAttribute(att4)
            div.appendChild(input)
            div.appendChild(button);

            var list = document.getElementById("spawnList");
            list.insertBefore(div, list.childNodes[0]);
        }

This is my HTML

<ul id="spawnList">


</ul>
<button id="spawnbtn" onClick="spawnSilly()">Add</button>

Seems to be the button thats causing the issue, but i can't figure out why? Any help would be awesome! thanks

Answer 1

Note that setAttribute() takes two arguments, the name of the attribute and the value. Using this in the right way, the code can be simplified like this:

function redirect()
{
    console.log("Redirect clicked!");
}

function spawnSilly()
{
    var div = document.createElement("DIV");
    var input = document.createElement("INPUT");
    var button = document.createElement("BUTTON");
    input.setAttribute("type", "text");
    input.setAttribute("placeholder", "Title");
    button.setAttribute("type", "button");
    button.setAttribute("onClick", "redirect()");
    button.innerHTML = "Redirect";
    div.appendChild(input)
    div.appendChild(button);

    var list = document.getElementById("spawnList");
    list.insertBefore(div, list.childNodes[0]);
}

.as-console {background-color:black !important; color:lime;}

<ul id="spawnList"></ul>
<button id="spawnbtn" onClick="spawnSilly()">Add</button>