javascript to create a button with onclick

Question

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.

could you explain why you're doing this, perhaps a better solution exists for what you're doing.. — AlanFoster
– AlanFoster, Commented Dec 28, 2011 at 1:35
its kinda (unnecesarily) complicated but i'll try. so the original button will create a bunch of stuff and delete itself. Among the created stuff is another button that will recreate the original button which could create another bunch of stuff and so on — WindowsMaker
– WindowsMaker, Commented Dec 28, 2011 at 1:45

naXa stands with Ukraine · Accepted Answer · 2018-09-28 12:25:15Z

38

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?

edited Sep 28, 2018 at 12:25

naXa stands with Ukraine

38.6k25 gold badges208 silver badges279 bronze badges

answered Dec 28, 2011 at 1:38

AlanFoster

8,3245 gold badges38 silver badges52 bronze badges

Sign up to request clarification or add additional context in comments.

5 Comments

WindowsMaker Over a year ago

i dont think it solves the DOM problem where the argument passed in is relative to the button :(

AlanFoster Over a year ago

@zaftcoAgeiha I have no idea what that means. Could you explain what you want please. Edit :: Check the post again.

WindowsMaker Over a year ago

ok i need to be able to dynamically create this <button onClick="highlight(this.parentNode.childNodes[1])">highlight</button> and have it clickable

WindowsMaker Over a year ago

i get the error "Uncaught TypeError: Cannot read property '1' of undefined". i think the problem is that javascript thinks that "this" refers to the js object as opposed to the html dom obj

AlanFoster Over a year ago

@zaftcoAgeiha It's possibly because I typed out 'childNotes' instead of 'childNodes'... The code works.

Ezen · Accepted Answer · 2020-07-04 13:07:48Z

1

You can also use the built-in setAttrbute javascript function.

var newButton = document.createElement("button")
newButton.setAttribute("onclick", "blah(this.parentNode.value)")

Hope it will help

answered Jul 4, 2020 at 13:07

Ezen

2613 silver badges7 bronze badges

Comments

Andrew Kozhemyakin · Accepted Answer · 2024-07-02 19:18:15Z

0

var newButton = document.createElement("button")
newButton.setAttribute("onclick", "blah(this.parentNode.value)")

answered Jul 2, 2024 at 19:18

Andrew Kozhemyakin

1

1 Comment

Yalcin Kilic Over a year ago

Hi! If you meant to add additional information or a different perspective, you might want to edit your answer to clearly highlight your unique contribution because it appears to be very similar to the previous answer.

Collectives™ on Stack Overflow

javascript to create a button with onclick

3 Answers 3

5 Comments

Comments

1 Comment

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

5 Comments

Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Linked

Related