如何添加文本框並將「編輯」功能切換爲「完成」JavaScript功能？

Question

我是新手，當談到JS編程時，我已經絞盡腦汁想出瞭解決方案。任何人都可以告訴我如何做到這一點？

我有一個「添加」按鈕和一個「編輯」按鈕。當您點擊「添加」按鈕時，文本框將出現在下方，以輸入名稱。同時，「編輯」按鈕然後變爲「完成」按鈕，以便當完成輸入文本時，在點擊「完成」按鈕後它需要出現在該頁面上。最後，當「完成」被點擊時，「編輯」按鈕返回。

這是另一個瘋狂，所以當你完成添加文本「編輯」按鈕的功能，以便單擊時刪除按鈕出現在名稱的右側。

Answer 1

Fiddle

你可以讓你不希望顯示，然後就調用JS功能需要設置這些元素的可視性隱藏的元素。

試試這個

Add<input type="text" id="text" style="display:none" /> 
<br> 
<button id="add" onclick="add()" name="add" value="Add">Add</button> 
<button id="edit" name="add" value="Edit">Edit</button> 
<button id="done" onclick="done()" name="add" value="Done" style="display:none">Done</button> 

的Javascript

function add() { 
document.getElementById('edit').style.display = "none"; 
document.getElementById('done').style.display = "block"; 
document.getElementById('text').style.display = "block"; 
} 

function done() { 
document.getElementById('done').style.display = "none"; 
document.getElementById('edit').style.display = "block"; 
document.getElementById('text').style.display = "none"; 

}