如何添加文本框并将“编辑”功能切换到“完成”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";

}