用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

回答

相關問題