我是初学者。不知道如何替换新的'输入值',当我点击'更新'按钮。
当我点击“编辑”按钮时,我添加了“输入”。
我想在新的“输入”中写一些东西,当我点击“更新(以前的“编辑”按钮)”时,我想得到新的输入值。(基本上更新项目或替换为新值)
const itemName = document.querySelector('.item_name');
const editBTN = document.querySelector('.item_edit');
const newItemInput = document.createElement('input');
editBTN.addEventListener('click', (event) => {
console.log('dfdfdfdf');
itemName.innerHTML = '';
newItemInput.type = 'text';
newItemInput.className = 'newItemInput';
itemName.appendChild(newItemInput);
newItemInput.focus();
editBTN.innerText = 'Update';
updateItem();
});
function updateItem() {
const updatedItem = newItemInput.value;
editBTN.addEventListener('click', () => {
const newSpan = document.createElement('span');
itemName.appendChild(newSpan);
})
};
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css" integrity="sha512-iecdLmaskl7CVkqkXNQ/ZH/XLlvWZOJyj7Yy7tcenmpD1ypASozpmT/E0iPtmFIB46ZmdtAc9eNBvH0H/ZpiBw==" crossorigin="anonymous" referrerpolicy="no-referrer" />
<section class="list">
<header class="header">Shopping List</header>
<ul class="items">
<li class="item_row">
<div class="item">
<input type="checkbox" id="item_name_check" value="1" />
<label for="item_name_check"><span class="item_name">Egg</span></label>
<div class="button_container">
<button class="item_edit">Edit</button>
<button class="item_delete">
<i class="fas fa-trash-can"></i>
</button>
</div>
</div>
</li>
</ul>
<form class="new_form">
<footer class="footer">
<input type="text" class="footer_input" />
<button type="submit" class="footer_button">
<i class="fas fa-plus"></i>
</button>
</footer>
</form>
</section>
todolist:CRUD
更新项目
编辑项目
简体中文
1条答案
按热度按时间myzjeezk1#
由于我们将 Edit 按钮重用为 Update 按钮,因此在事件侦听器中设置一个条件,通过检查其文本内容来检查其状态:
我们不需要
updateItem()
函数。在truthy
if
分支中:把这些放在一起: