单击Javascript，Fire功能(Javascript, Fire Function on click)

单击Javascript，Fire功能(Javascript, Fire Function on click)

我是javascript的新手，我正在尝试创建一个内部具有某些html的元素。

这是我的代码：

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>'; }

我相信这是正确的，但我不知道如何在用户点击按钮时触发它。 我在外部js文件中有这个代码，所以我不想要任何内联javascript。

UPDATE

嘿，感谢所有帮助人员，我遇到了与我的JS文件链接的问题，这就是为什么你的代码都没有工作的原因，但是随着时间的推移我意识到我自己已经发现了代码的问题。 但如果你想要，你们仍然可以帮助我:)

这就是我现在所拥有的：

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); }

不幸的是，我不得不使用html onclick属性，但是现在这样做了。 我遇到的问题是因为最后一行代码

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

它不是创建任何div，它只是继续将div推到一边，我需要它做的是创建一个从左边滑入的div（它做的），但是当我点击按钮时为了获得一个新的div，它实际上创建了一个新的div而不是仅仅将前一个div推到右边。

我希望这是有道理的，非常感谢你的帮助。

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.

最满意答案

最简单的方法是将函数指定为onclick处理程序。

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

事件监听器是更专业的方式，特别是因为它们添加事件处理程序而不是覆盖（如onclick ），但由于W3C模型和Microsoft模型都不适用于所有浏览器，因此最好使用类似jQuery的框架如果需要，实现更强大的行为。

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.