Javascript, Fire Function on click.

Question

Hi, I'm new to javascript and I am attempting to create an element with certain html inside.

This is my code:

function newTask()
    {
        var newtask = document.CreateElement('li');
        newtask.setAttribute('id','newtask');
        newtask.innerHTML="DeveloperSnippets";
        document.getElementById('newtaskcontainer').appendChild(newtask);
        document.getElementById('newtask').innerHTML='<input type="text" size="" value="Click here to add new task"> <a href=""><img src="IMG/delete.png" alt="delete" class="fr" /></a>';
    }

I beleive that is right but I don't know how to get that to fire when a user clicks on a button. I have this code in an external js file so I dont want to have to have any inline javascript.

UPDATE

Hey, thanks for all your help guys, I was having problems linking with my JS file which was the reason why none of your code would work, but by time I realized the problem I had already found out the code myself. But you guys can still help me if you want :)

This is what I have got now:

function newTask()
{
    var addTask= document.createElement("div");
    addTask.id = "newtask";
    addTask.innerHTML = "/* My HTML */"
    document.getElementById("newtaskcontainer").appendChild( addTask);
    $("#newtask").animate({opacity: "1.0", left: "+=1000"}, 500);
} 

Unfortunatly, I had to use a html onclick attribute, but for now that will do. The problem I do have with, is because of the last line of code

$("#newtask").animate({opacity: "1.0", left: "+=1000"}, 500);

it isn't creating anymore divs, it just keeps on pushing the div to the side, and what I need it to do, is create a div that slides in from the left (which it does), but then when I click the button to get a new div, it actually created a new div instead of just pushing the previous div further to the right.

I hope that makes sense, and thank you all so much for your help.

Answer 1

There's a jQuery plugin that you should use for that...

Just kidding. In your HTML code add an "onclick" attribute with the function as a parameter.

<button onclick="newTask();">Click Me!</button>

Or, you can assign a function to the onclick handler.

document.getElementById('your_button_id').onclick = newTask;

But this is the way W3C wants you do do this:

document.getElementById('your_button_id').addEventListener('click', newTask, false);

EDIT:

There's a cross-browser way of putting all of this together (googled for "cross browser javascript events" - taken from http://javascript.about.com/library/bldom21.htm):

function addEvent(el, eType, fn, uC) {
  if (el.addEventListener) {
   el.addEventListener(eType, fn, uC);
   return true;
  } else if (el.attachEvent) {
   return el.attachEvent('on' + eType, fn);
  } else {
   el['on' + eType] = fn;
  }
}

function doWhatever() { alert('Hello World'); }

addEvent(document.getElementByID('your_id'), 'click', doWhatever, false);

Answer 2

The simplest way there is is to assign the function as the onclick handler.

document.getElementById('my-button').onclick = newTask;

Event listeners are the more professional way to go, especially since they add event handlers instead of overwrite (like onclick) does, but since neither the W3C model nor the Microsoft model works in all browsers, it might be best to use a framework like jQuery to achieve that more robust behavior, if required.

Answer 3

You can write your javacript code in an external javascript file them call it from your html code

<script type="text/javascript" src="external_js_file.js"></script>

Now you can call any fucntion from any elements/tags

example :

<INPUT TYPE=BUTTON OnClick="newTask();">

Answer 4

There are three ways of registering click events unobtrusively, that is, without any inline scripting or onclick attributes in your HTML. There's the old way that Matchu describes, the IE way and the W3C standard way. The last two are the "modern" approach and its relatively easy to support both.

var button = document.getElementById('button_id');
if (button.attachEvent) {
    //handle IE
    button.attachEvent('onclick', handlerFunc);
} else {
    //handle other browsers
    button.addEventListener('click', handlerFunc);
}

A few important caveats. First, note the difference in event names. The W3C version takes the event name without the "on" at the beginning.

Second, the this keyword is handled differently in the two cases. When using addEventListener the code in handlerFunc can use this to refer to the DOM object that triggered the event.

When using the IE specific attachEvent the this keyword points to the window object, which is pretty useless. To get at the target of the event you need to use the event object, which is also handled differently.

Which brings us to the third difference. In the W3C standard approach the event object gets passed to the handler function. So when you define your handler just say function handlerFunc(e) {...} and you can use e to get all kinds of info about the nature of the event.

In the IE specific .attachEvent the event object is put in window.event. You can get the target of the event that is being handled in window.event.target.

To handle both cases write your handler like so:

function handlerFunc(e) {
    var event = e || window.event,
        target = event.target;
    //you event code here...
}

event gets either the argument e or window.event. Whichever exists.