Javascript, Fire Fonction sur le clic

Question

Je suis nouveau à javascript et j'essaye de créer un élément avec certain html à l'intérieur.

Ceci est mon 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>'; 
    } 

Je beleive qui est juste, mais je ne sais pas comment cela à feu lorsqu'un utilisateur clique sur un bouton. J'ai ce code dans un fichier js externe, donc je ne veux pas avoir de javascript en ligne.

MISE À JOUR

Hey, merci pour votre aide les gars, j'avais des problèmes de liaison avec mon fichier JS qui était la raison pour laquelle aucun de votre code fonctionnerait, mais par le temps je me suis rendu le problème que j'avais déjà trouvé le code moi-même. Mais vous les gars peuvent encore me aider si vous voulez :)

C'est ce que j'ai maintenant:

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, je devais utiliser un attribut HTML onclick, mais pour l'instant qui va le faire. Le problème que je n'ai avec, est à cause de la dernière ligne de code

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

il ne crée pas plus divs, il ne cesse de pousser le div sur le côté, et ce que je besoin de le faire, est créer une div qui glisse depuis la gauche (ce qui est le cas), mais quand je clique sur le bouton pour obtenir une nouvelle div, elle crée en fait une nouvelle div au lieu de simplement pousser la div précédente vers la droite.

J'espère que cela a du sens, et je vous remercie beaucoup pour votre aide.

Answer 1

La manière la plus simple consiste à affecter la fonction en tant que gestionnaire onclick.

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

Event listeners sont le moyen le plus professionnel d'aller, d'autant plus qu'ils ajoutent des gestionnaires d'événements au lieu de Ecraser (comme onclick) ne, mais étant donné que ni le modèle du W3C, ni le modèle Microsoft fonctionne dans tous les navigateurs, il pourrait être préférable pour utiliser un cadre comme jQuery pour obtenir ce comportement plus robuste, si nécessaire.

Answer 2

Il y a un plugin jQuery que vous devez utiliser pour cela ...

Just kidding. Dans votre code HTML, ajoutez un attribut "onclick" avec la fonction en paramètre.

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

Vous pouvez également affecter une fonction au gestionnaire onclick.

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

Mais c'est le W3C façon veut que vous ne faites ceci:

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

EDIT:

Il y a une façon cross-browser de mettre tout cela ensemble (googlé pour " cross browser javascript events "- tiré de 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 3

Vous pouvez écrire votre code JavaScript dans un fichier JavaScript externe, puis l'appeler à partir de votre code HTML.

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

Vous pouvez désormais appeler n'importe quelle fonction à partir de n'importe quels éléments/balises.

Exemple:

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

Answer 4

Il existe trois façons d'enregistrer les événements de clic, qui est discrètement, sans aucun script en ligne ou onclick attributs dans votre code HTML. Il y a l'ancienne façon que Matchu décrit, la manière IE et la manière standard du W3C. Les deux derniers sont l'approche "moderne" et il est relativement facile de les soutenir tous les deux.

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

Quelques mises en garde importantes. Tout d'abord, notez la différence dans les noms d'événements. La version W3C prend le nom de l'événement sans le "on" au début.

Deuxièmement, le mot-clé this est géré différemment dans les deux cas. Lorsque vous utilisez addEventListener le code dans handlerFunc peut utiliser this pour faire référence à l'objet DOM qui a déclenché l'événement. Lorsque vous utilisez le mot-clé attachEvent spécifique à l'IE, le mot-clé this pointe vers l'objet fenêtre, ce qui est plutôt inutile. Pour atteindre la cible de l'événement, vous devez utiliser l'objet événement, qui est également géré différemment.

Ce qui nous amène à la troisième différence. Dans l'approche standard du W3C, l'objet événement est transmis à la fonction de gestionnaire. Donc, lorsque vous définissez votre gestionnaire, dites simplement function handlerFunc(e) {...} et vous pouvez utiliser e pour obtenir toutes sortes d'informations sur la nature de l'événement.

Dans l'IE spécifique .attachEvent l'objet d'événement est mis en window.event. Vous pouvez obtenir la cible de l'événement traité dans window.event.target.

Pour gérer les deux cas, veuillez indiquer votre gestionnaire comme ceci:

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

event obtient soit l'argument e ou window.event. Celui qui existe.