How to Register EventHandler with button

Question

1.00/5 (1 vote)

See more:

I have written following Javascript code.

JavaScript

<body>
    <script>
        function hi(){
           alert("Hello World !!");
        }

        var no1 = document.createElement('input');
        no1.setAttribute('type', 'button');
        no1.setAttribute('name', 'one');
        no1.setAttribute('value', '1');
        document.body.appendChild(no1);
    
        no1.onClick = hi;
    
    </script>
</body>

I have registered my event with the function hi(), but it is not working.
Is there any error in my code?

I would like that whenever I click on my button, it show me the alert box.

Thanks!

Posted 24-Dec-12 7:05am

Rabia Bashir

Updated 24-Dec-12 8:13am

André Kraak

v5

Add a Solution

3 solutions

Solution 1

You never tried to create a single attribute responsible for events, which in this case should be onclick attribute: http://www.w3schools.com/jsref/event_onclick.asp[^].

But you don't have to add the attribute explicitly with setAttribute. It could be just

JavaScript

no1.onclick=function(){
   // some JavaScript code...
};

Good luck,

—SA

Posted 24-Dec-12 8:02am

Sergey Alexandrovich Kryukov

Updated 24-Dec-12 8:05am

v2

Solution 3

You can make a asp.net object button or image button, and add the attribute onClientClick

So you make the button, press F4, in the property onClientClick enter "hi(); return false;" without the double quotes.

return false cancels the button postback event. You can do return hi();

and if hi returns true, the postback event fires, and if hi() returns false, the postback is canceled.

Just remember to register your java script file first.

[EDIT]
To fix your code above, you need to create the element correctly first for it to work. Don't use setAttribute, JavaScript has everything you need to build the element.

var inputObj = document.createElement ("input");
inputObj.type = "button"

<head>
    <script type="text/javascript">
        function AddButton () {
            var button = document.createElement ("input");

            button.type = "button";
            button.value = "Create a new button";
            button.onclick = AddButton;

            var container = document.getElementById ("buttonContainer");
            container.appendChild (button);
        }
    </script>
</head>
<body onload="AddButton ()">
    <div id="buttonContainer"></div>
</body>

http://help.dottoro.com/ljxhibki.php[^]

Posted 24-Dec-12 13:14pm

jkirkerx

Updated 24-Dec-12 13:21pm

v2

Add a Solution

Add your solution here

Treat my content as plain text, not as HTML

Preview 0

…

Existing Members

Sign in to your account

...or Join us

Download, Vote, Comment, Publish.

Your Email
Password
Forgot your password?

Your Email
This email is in use. Do you need your password?
Optional Password

I have read and agree to the Terms of Service and Privacy Policy
Please subscribe me to the CodeProject newsletters

When answering a question please:

Read the question carefully.
Understand that English isn't everyone's first language so be lenient of bad spelling and grammar.
If a question is poorly phrased then either ask for clarification, ignore it, or edit the question and fix the problem. Insults are not welcome.
Don't tell someone to read the manual. Chances are they have and don't get it. Provide an answer or move on to the next question.

Let's work to help developers, not make them feel stupid.

This content, along with any associated source code and files, is licensed under The Code Project Open License (CPOL)

**Zoltán Zörgő** · Accepted Answer · 2012-12-24T11:53:00

The problem is, tat this way the generated code looks like this:

HTML

<input submitname="one" type="button" onclick="function hi(){ alert(" hello="" world="" value="1" />

I suppose, this is not what you want :)
You know why? Because of the capital letter: no1.onClick = hi;
Just make it lowercase and will work (no1.onclick = hi;).