javascript - 如何添加文本框并将“编辑”功能切换到“完成”javascript 功能？

Question

当谈到 JS 编程时，我是一个新手，我绞尽脑汁想弄清楚这一点。谁能告诉我如何做到这一点？

我有一个“添加”按钮和一个“编辑”按钮。当您单击“添加”按钮时，下方会出现一个文本字段以输入名称。同时，“编辑”按钮变为“完成”按钮，这样当完成输入文本后，单击“完成”按钮后，它需要出现在该页面上。最后，当单击“完成”时，“编辑”按钮返回。

这是另一个疯狂之处，因此当您完成添加文本时，“编辑”按钮会起作用，以便在单击时删除按钮会出现在名称的右侧。

Answer 1

小提琴

您可以将不想显示的元素隐藏起来，然后只需调用 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";

}