CODEWITHSUNDEEP
javascripthtml
Arun CH
Arun CH

Reputation: 101

How to insert onclick() on dynamic div

Below is a function where I generate dynamic div using javascript. I want to use javascript onclick() on the dynamic div generated.But I am not getting the actual value on the variable while onclick executes. Also no adjacent onclick() not working. Thanks in advance.

function selecteditems()
    {

    var i=1;
    //var val="";
    var fld = "";
    var newdiv = document.createElement("div");
    document.getElementById("showselecteditems").innerHTML="";

    while(i<=53)
    {
    fldOne = document.getElementById('datepicker_value').value;
    fld = document.getElementById('timedrpact'+i).value;
    fidpartnum = document.getElementById('selectdrpact'+i).value;
    fidrepeat = document.getElementById('repeat'+i).value;

    if(fld!="")
    {
            var par='ddwnx'+i;
            var ele = document.createElement("div");
            ele.setAttribute("id","showselecteditems"+i);
            ele.setAttribute("class","inner");

//Trouble here.Onclick() not alerts actual value.Instead alert as [objectHTMLDivElement].
//Also consecutive onclick not working.
              ele.innerHTML="<a onclick='return closedthis("+par+")';><img src='images/close.png' width='30' height='30'></a>"+fldOne+"&nbsp;,&nbsp;"+fld+"&nbsp;,&nbsp;"+fidpartnum+"&nbsp;Paticipants, &nbsp;"+fidrepeat+"&nbsp;Repeat";
            //ele.innerHTML=fldOne+"&nbsp;,&nbsp;"+fld+"&nbsp;,&nbsp;"+fidpartnum+"&nbsp;Paticipants, &nbsp;"+fidrepeat+"&nbsp;Repeat";
            document.getElementById("showselecteditems").appendChild(ele);
    }
        i++;
        }

    }

Upvotes: 3

Views: 6457

Answers (2)

lastr2d2
lastr2d2

Reputation: 3968

I built a fiddle here for sample.

The key point here is you should not use something like this in a loop.

<a onclick='return closedthis("+par+") ...

Even it works, the parameter par will always be the last value you set, in your case, that's 54. You should set an custom attribute, e.g. data-index to your dynamic element and use this.getAttribute() in your event handler.

$ = document.getElementById.bind(document);

$("createButtons").addEventListener("click", function () {
    $("container").innerHTML = "";
    for (var i = 0; i < 50; i++) {
        var element = document.createElement("div");
        element.setAttribute("class", "dynamicButton");
        element.setAttribute("data-index", i);
        element.innerHTML = i;
        element.onclick = function () {
            // do not use this, since when you click the button, i will always be 50 (the last value you set)
            // $("clickedIndex").innerText = i;

            // use this instead
            var index = this.getAttribute('data-index');
            $("clickedIndex").innerText = index;
        };

        /*
        element.addEventListener("click ", function () {
            var index = this.getAttribute('data-index');
            $("clickedIndex").innerText = index;
        });
        */
        $("container").appendChild(element);
    }
});

And sure, you can use element.addEventListener too.

Upvotes: 1

Voonic
Voonic

Reputation: 4785

You can try this | Demo

function myfunc()
{
     alert('clicked');   
}

var el = document.createElement('a');
el.setAttribute("href","javascript:void(0)"); // to cancel the default effect of anchor tag
el.onclick = myfunc;
if(el.innerText)
{
    el.innerText = "click me";
}
else el.textContent ="click me";
document.body.appendChild(el);

Upvotes: 1

Related Questions