Javascript, функция огня на клик

Question

Я новичок в 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 дальше вправо.

Я надеюсь, что это имеет смысл, и большое спасибо всем за вашу помощь.

Answer 1

Самый простой способ - назначить функцию обработчику onclick.

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

Прослушиватели событий - более профессиональный способ, тем более что они добавляют обработчики событий вместо перезаписи (как onclick), но поскольку ни модель W3C, ни модель Microsoft не работают во всех браузерах , может быть лучше использовать каркас, такой как jQuery , чтобы добиться этого более надежного поведения, если требуется.

Answer 2

Существует три способа ненавязчивой регистрации событий кликов, то есть без каких-либо встроенных сценариев или атрибутов onclick в вашем HTML.Существует старый способ, который описывает Matchu, путь IE и стандарт W3C.Последние два являются «современным» подходом и относительно легко поддерживают оба.

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

Несколько важных предостережений.Во-первых, обратите внимание на разницу в именах событий.Версия W3C берет имя события без «on» в начале.

Во-вторых, ключевое слово this обрабатывается по-разному в обоих случаях.При использовании addEventListener код в handlerFunc может использовать this для ссылки на объект DOM, вызвавший событие.

При использовании специфического для IE attachEvent ключевое слово this указывает на окнообъект, который довольно бесполезен.Чтобы добраться до цели события, вам нужно использовать объект события, который также обрабатывается по-разному.

Что подводит нас к третьему различию.В стандартном подходе W3C объект события передается в функцию-обработчик.Поэтому, когда вы определяете свой обработчик, просто говорите function handlerFunc(e) {...}, и вы можете использовать e, чтобы получить всевозможную информацию о природе события.

В специфичном для IE .attachEvent объект события помещается вwindow.event.Вы можете получить цель события, которое обрабатывается в window.event.target.

Для обработки обоих случаев напишите свой обработчик следующим образом:

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

event получает любой аргумент e или window.event.Что бы ни существовало.

Answer 3

Вы можете написать свой код JavaScript во внешнем файле JavaScript, а затем вызвать его из кода HTML.

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

Теперь вы можете вызывать любую функцию из любых элементов / тегов.

Пример:

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

Answer 4

Есть плагин jQuery, который вы должны использовать для этого ...

Шучу.В своем HTML-коде добавьте атрибут «onclick» с функцией в качестве параметра.

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

Или вы можете назначить функцию для обработчика onclick.

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

Но именно так W3C хочет, чтобы вы сделали это:

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

РЕДАКТИРОВАТЬ :

Существует кросс-браузерный способ собрать все это вместе (googled для "кросс-браузерных событий JavaScript" - взято из 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);