CODEWITHSUNDEEP
javascripthtml
nicael
nicael

Reputation: 18995

Javascript - Add button with onClick attribute dynamically

I am using this code, which adds button:

document.getElementById("items").innerHTML=document.getElementById("items").innerHTML+
('<input type="button" value="'+document.getElementById("add").value+'"><br>');

It works. Now i am adding onClick attribute:

document.getElementById("items").innerHTML=document.getElementById("items").innerHTML+
    ('<input type="button" onClick="alert("'+document.getElementById("add").value+'")"
     value="'+document.getElementById("add").value+'"><br>');

I want to display an alert with button name (add is button id) if I click on button. But no alert displayed. Probably I made i mistake in onClick, because button is being added.
Whats wrong with my code?

Upvotes: 9

Views: 30569

Answers (2)

nicael
nicael

Reputation: 18995

I managed to do it!

 document.getElementById("items").innerHTML=document.getElementById("items").innerHTML
+('<input type="button" onClick="alert(\''+document.getElementById("add").value+'\')"
 value="'+document.getElementById("add").value+'"><br>')

I replaced " (double quote) with \' (single quote) in alert.
Works, button added, alert displayed.

Upvotes: 0

adeneo
adeneo

Reputation: 318182

Do it the proper way

var items  = document.getElementById("items"),
    button = document.createElement('input'),
    br     = document.createElement('br'),
    add    = document.getElementById("add").value;

button.type  = 'button';
button.value = add;
button.addEventListener('click', function() {
    alert(add);
}, false);

items.appendChild(button);
items.appendChild(br);

Upvotes: 26

Related Questions