0

Something like this:

<html>
   <head></head>

   <body>
      <button onclick="elem()">Create element</button>
      <script type="text/javascript">
         function elem() {
            var div = document.createElement('div');
            document.body.appendChild(div);
            div.id = 'myDiv';
            div.innerHTML = 'This is created div element with javascript';
         }

         var myDiv = document.getElementById('myDiv');
         myDiv.onclick = function() {
            alert('Hello');
         }
      </script>
   </body>
</html>

I have problem. How call function when i clicik on the created element?

1
  • Move myDiv.onclick inside elem() Commented Feb 14, 2014 at 20:14

4 Answers 4

3

either you need to add the click event when you create the element

function elem() {
    var div = document.createElement('div');
    document.body.appendChild(div);
    div.id = 'myDiv';
    div.innerHTML = 'This is created div element with javascript';
    div.onclick = function() {
       alert('Hello');
    };
}

or you need to listen for the click event with event bubbling with an element that is a ancestor.

document.getElementsByTagName("body")[0].onclick = function (evt) {  //there are better ways to add an event
    evt = evt || window.event;
    var target = evt.target || evt.srcElement;
    if(target.id==="myDiv") {
        alert("hello");
    }
};
Sign up to request clarification or add additional context in comments.

Comments

1

Add the event handler when you create the new element. Otherwise the script will execute and attempt to assign the event handler before the div is attached to the DOM.

     function elem() {
        var div = document.createElement('div');
        document.body.appendChild(div);
        div.id = 'myDiv';
        div.innerHTML = 'This is created div element with javascript';

        div.onclick = function() {
            alert('Hello');
        }
     }

JS Fiddle: http://jsfiddle.net/Mve2T/

1 Comment

There is no jQuery here. Also, he already does this: document.body.appendChild(div);
0

Your myDiv code should exist insdie the elem function you can use also addEventListener() instead of 'onclick' for binding the handler on particular event. Something like this.

function elem() {
    var div = document.createElement('div');
    document.body.appendChild(div);
    div.id = 'myDiv';
    div.innerHTML = 'This is created div element with javascript';

     var myDiv = document.getElementById('myDiv');
        myDiv.addEventListener('click', function (){
        alert('hello'); 
    });
 }

Demo

1 Comment

myDiv is null. Also, he does this inside the elem() function.
0

you better add your event in your elem function like:

<script type="text/javascript">
     function elem() {
        var div = document.createElement('div');
        document.body.appendChild(div);
        div.id = 'myDiv';
        div.innerHTML = 'This is created div element with javascript';
        div.onclick = function() {
            alert('Hello');
        }
     }
</script>

your DEMO

1 Comment

His elem() function is being called via a <button> in the HTML.

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.