javascript - When adding 2 buttons inside div, only the second one works -

javascript - When adding 2 buttons inside div, only the second one works -

adding these 2 buttons using greasemonkey. i've tried reversing order , it's 2nd added button works. other button not fire onclick event.

// add together click chat button mydiv = document.getelementbyid("optionaljobinfodata"); var btn = document.createelement("input"); btn.type = 'button'; btn.value = 'click chat'; btn.onclick = function() { window.open(chaturl); }; mydiv.innerhtml += "<i>notify dispatch</i><br><i>(stuck on job)</i>&nbsp;&nbsp;"; mydiv.appendchild(btn); // credentials button mydiv = document.getelementbyid("optionaljobinfodata"); btn = document.createelement("input"); btn.type = 'button'; btn.value = 'credentials'; btn.onclick = function() { window.open(credsurl); }; mydiv.innerhtml += "<br><br><i>dsl credentials</i> "; mydiv.appendchild(btn);

// add together click chat button mydiv = document.getelementbyid("optionaljobinfodata"); var btn = document.createelement("input"); btn.type = 'button'; btn.id = 'openchat'; btn.value = 'click chat'; mydiv.innerhtml += "<i>notify dispatch</i><br><i>(stuck on job)</i>&nbsp;&nbsp;"; mydiv.appendchild(btn); // credentials button mydiv = document.getelementbyid("optionaljobinfodata"); btn = document.createelement("input"); btn.type = 'button'; btn.value = 'credentials'; btn.id = 'opencreds'; mydiv.innerhtml += "<br><br><i>dsl credentials</i> "; mydiv.appendchild(btn); document.getelementbyid("opencreds").onclick = function() { window.open(credsurl); }; document.getelementbyid("openchat").onclick = function() { window.open(chaturl); };

above should work fine. problem innerhtml += recreate objects. , pointer onclick function handler lost because of (type, value etc. parts of html, innerhtml can't pointer function onclick)

javascript greasemonkey