javascript to create a button with onclick

javascript dom createelement
WindowsMaker picture WindowsMaker · Dec 28, 2011 · Viewed 85.2k times · Source

I'm trying to use javascript to create a button that has a onclick event that calls a function defined in the head that takes in as parameter a dom object relative to the button. how do i do this?

ex: 

<html>
<head> <script>function blah(obj){alert(obj.value)}</script></head>
<body>
<button onclick="blah(this.parentNode.value);"></button>
</body>
</html>

javascript:

var newButton = document.createElement("button");
???

in the end i want the new button to be the same as the existing one.

Answer

AlanFoster picture AlanFoster · Dec 28, 2011 
function createButton(context, func) {
    var button = document.createElement("input");
    button.type = "button";
    button.value = "im a button";
    button.onclick = func;
    context.appendChild(button);
}

window.onload = function() {
    createButton(document.body, function() {
        highlight(this.parentNode.childNodes[1]);
        // Example of different context, copied function etc
        // createButton(this.parentNode, this.onclick);
    });
};

Is that what you want?

Related questions

Creating a div element inside a div element in javascript

I'm trying a very basic example of creating a div inside an already existing div. It doesn't seem to be working when I use: document.getElementbyId('lc').appendChild(element) but works fine when I do this: document.body.appendChild(element) …

Read More
Advantages of createElement over innerHTML?

In practice, what are the advantages of using createElement over innerHTML? I am asking because I'm convinced that using innerHTML is more efficient in terms of performance and code readability/maintainability but my teammates have settled on using createElement as …

Read More
React JS. Append element to the DOM

I'm new to react and I've been playing around with it the past few days. I'm trying to append a value to the DOM, I found a way to do it but I'm looking for a way to do with …

Read More