Javascript addEventListener, чтобы добавить текстовое поле одним щелчком мыши?

Question

Мне нужно иметь возможность щелкнуть некоторый текст (id = "txt") и запустить событие, которое заменяет этот текст текстовым полем ... в настоящее время у меня есть этот код:

var myTxt = document.getElementById("txt");
myTxt.addEventListener("click", name1Click, false);

function textclick()
{
    var removeMe = document.getElementById("txt");
    var root = document.body;
    root.removeChild(removeMe);
    var addMe = document.createElement("input");
    addMe.setAttribute("type","text");
    addMe.setAttribute("id","i");
    root.appendChild(addMe);
}

Это не работает, а какие-нибудь идеи?

Answer 1

В коде, который вы разместили здесь, ваш eventListener вызывает name1Click, но ваша функция называется textclick.

Когда вы исправляете это, похоже, здесь работает: http://jsfiddle.net/jfriend00/55mQq/.

Вы можете заметить, что addEventListener() не поддерживается в более старых версиях IE (вместо этого вы должны использовать attachEvent()).

Answer 2

В вашем коде:

> var myTxt = document.getElementById("txt");
> myTxt.addEventListener("click", name1Click, false);

Вы добавляете функцию с именем name1Click в addEventListener , но ваша функция называется textclick . Исправьте это, и это "работает"

Также:

> function textclick() {
>     var removeMe = document.getElementById("txt");
>     var root = document.body;
>     root.removeChild(removeMe);

Вполне вероятно, что элемент removeMe не всегда будет дочерним элементом тела, поэтому вы можете удалить его более обобщенно с помощью:

  removeMe.parentNode.removeChild(removeMe);

Но узел можно заменить, а не удалить, см. Ниже.

>     var addMe = document.createElement("input");
>     addMe.setAttribute("type","text");
>     addMe.setAttribute("id","i");

Метод setAttribute содержит ошибки в некоторых браузерах и его лучше избегать, если он не нужен. Для стандартных свойств DOM просто установите свойство напрямую:

    addMe.type = 'text';
    addMe.id = 'i';

>     root.appendChild(addMe); 

Вместо того, чтобы удалять один узел и вставлять другой, вы можете просто использовать одну операцию и заменить первую в общем случае:

  removeMe.parentNode.replaceChild(addMe, removeMe);

> }