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/。

您可能需要注意，旧版本的 IE 不支持 addEventListener()（您必须使用 attachEvent() 代替）。

Answer 2

在您的代码中：

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

您在 addEventListener 中添加一个名为 name1Click 的函数，但您的函数名为 textclick。修复这个问题，它就“有效”

另外：

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

removeMe 元素可能并不总是 body 的子元素，因此您可以更一般地删除它：

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

> }