用JavaScript DOM

我有麻烦JavaScript创建一个可编辑的文本字段创建一个可编辑的文本字段中，我发现了一些功能来编辑，但我不知道是否有可能从高中编辑标题以中东学校这是由函数创建createTextNode用JavaScript DOM

我的疑问，特别在使用指令addEvent(document.getElementById("h1"), "click", new Function("edit(this)"));添加事件编辑的文本字段，运行代码片段，看看结果

var school = new School(1); 
 

 
function School(id) { 
 
    this.id = id; 
 
    Unload_School(); 
 

 
    function Unload_School() { 
 

 
    var div = document.createElement("div"); 
 
    div.id = "school"; 
 

 
    var h1 = document.createElement("h1"); 
 
    h1.id = "h1"; 
 
    h1.style.color = "red"; 
 

 
    var title = document.createTextNode("High School"); 
 
    h1.appendChild(title); 
 

 
    // I use here but not work 
 
    addEvent(document.getElementById("h1"), "click", new Function("edit(this)")); 
 

 
    var h3 = document.createElement("h3"); 
 
    h3.style.color = "blue"; 
 

 
    var subtitle = document.createTextNode("List Of Students:"); 
 
    h3.appendChild(subtitle); 
 

 
    div.appendChild(h1); 
 
    div.appendChild(h3); 
 

 
    document.body.appendChild(div); 
 
    }; 
 
} 
 

 
function addEvent(obj, evType, fn) { 
 
    try { 
 
    obj.addEventListener(evType, fn, false); 
 
    } catch (e) {} 
 
    try { 
 
    obj.attachEvent("on" + evType, fn); 
 
    } catch (e) {} 
 
} 
 

 
function edit(param) { 
 
    var elem = param; 
 
    var input = document.createElement("input"); 
 
    input.setAttribute("type", "text"); 
 
    input.setAttribute("value", elem.firstChild.nodeValue); 
 
    removeChildren(elem); 
 
    elem.appendChild(input); 
 
    input.focus(); 
 
    input.select(); 
 
    addEvent(input, "blur", function() { 
 
    removeChildren(elem); 
 
    elem.appendChild(document.createTextNode(input.value)); 
 
    }); 
 
} 
 

 
function removeChildren(param) { 
 
    for (var i = 0, elem; elem = param.childNodes[i]; i++) { 
 
    elem.parentNode.removeChild(elem); 
 
    } 
 
}

#school { 
 
    display: inline-table; 
 
    vertical-align: middle; 
 
    text-align: left; 
 
} 
 

 
#h1 { 
 
    font-size: 50px; 
 
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans - serif; 
 
}

<!DOCTYPE html> 
 
<html lang="pt-PT"> 
 

 
<head> 
 
    <meta charset="UTF-8"> 
 
    <title>High School</title> 
 
</head> 
 

 
<body> 
 
    <div id="school"></div> 
 
</body> 
 

 
</html>

来源

2016-05-23 DSanches

'document.title =“无论你想放什么标题”;'但是我不明白你的要求。如果可能的话发布工作小提琴 – avck

@avck，试试这个https://jsfiddle.net/phfuLjab/1/ – DSanches

@avck，在'h1.id =“h1”;'**高中**，我想改变**中学**，我创建了一个标题'var title = document.createTextNode（“High School”）;'并添加到'h1.appendChild（title）;'我想使用'addEvent（document.getElementById（“ h1“），”click“，new Function（”edit（this）“））;'编辑**标题**到**新标题**里面** h1 ** – DSanches

经验法则：创建元素时，在将元素添加到DOM之前不要查找元素。

check this working fiddle

div.appendChild(h1); 
div.appendChild(h3); 
document.body.appendChild(div);

只有附加的所有元素后，你应该寻找你的元素。

addEvent(document.getElementById("h1"), "click", new Function("edit(this)"));

来源

2016-05-23 12:34:26 avck

感谢它的工作，现在我明白了，只有在追加所有元素之后，您才应该搜索元素。 – DSanches

更改您的代码从addEvent(getElementById("h1"), "click", new Function("edit(this)"));到addEvent(document.getElementById("h1"), "click", new Function("edit(this)"));。也没有称为h1的ID。

来源

2016-05-23 11:43:59

好的，谢谢，我会制作 – DSanches

有一个名为h1的ID，他正在创建它，如果你看起来 – avck

回答

相关问题