well I am trying to append a button when user clicks an add button, also the button which is getting appended should have an onclick attribute or eventListener() to call deleteMyOrder() so how can I achieve this? I have done the following thing but it is still not working:
<body>
<div id="insertHere"> </div>
<input type="button" value="addButton" onclick="myFunc()" />
<script>
function myFunc()
{
var cell4 = document.getElementById('insertHere');
var element3 = document.createElement("input");
element3.type = "button";
element3.name = "add";
element3.id = "forRemove";
element3.value="Remove";
element3.className="btn btn-outline-danger btn-sm";
element3.onclick = "deleteMyOrder()";
cell4.appendChild(element3);
}
You can add event listener on the dynamically created button like this
element3.addEventListener('click', () => { console.log('button clicked') })
<body>
<div id="insertHere"> </div>
<input type="button" value="addButton" onclick="myFunc()" />
<script>
function myFunc()
{
var cell4 = document.getElementById('insertHere');
var element3 = document.createElement("input");
element3.type = "button";
element3.name = "add";
element3.id = "forRemove";
element3.value="Remove";
element3.className="btn btn-outline-danger btn-sm";
element3.addEventListener('click', () => {
console.log('button clicked'); // your click action here
})
cell4.appendChild(element3);
}
</script>