英文:
JS: TODOLIST - EDIT/Update Item
问题
I'm a beginner.. no idea how to replace new 'input value' when I click 'update' button.
I add 'input' when i click 'edit' button.
I want to write something in the new 'input' and when i click 'update(previously 'edit' button)' then want the new input value. (basically update the item or replace to the new value)
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
Update items
Edit items
Javascript
英文:
I'm a beginner.. no idea how to replace new 'input value' when I click 'update' button.
I add 'input' when i click 'edit' button.
I want to write something in the new 'input' and when i click 'update(previously 'edit' button)' then want the new input value. (basically update the item or replace to the new value)
<!-- begin snippet: js hide: false console: true babel: false -->
<!-- language: lang-js -->
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);
})
};
<!-- language: lang-html -->
<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>
<!-- end snippet -->
todolist : CRUD
Update items
Edit items
Javascript
答案1
得分: 0
由于我们正在将 Edit 按钮重用为 Update 按钮,请在事件侦听器内部使用条件来检查它的状态,通过检查其文本内容:
editBTN.addEventListener('click', (event) => {
if (event.target.innerText === 'Update') {
// …
} else {
console.log('dfdfdfdf');
itemName.innerHTML = '';
// …
}
});
我们不需要 updateItem()
函数。
在真值 if
分支中:
// 将项目名称设置为`<input>`内的值,删除`<input>`。
itemName.innerText = newItemInput.value;
// 为下一次编辑将`<input>`设置回为空。
newItemInput.value = '';
// 将Update按钮文本恢复为Edit。
editBTN.innerText = 'Edit';
将所有内容组合在一起:
const itemName = document.querySelector('.item_name');
const editBTN = document.querySelector('.item_edit');
const newItemInput = document.createElement('input');
editBTN.addEventListener('click', (event) => {
if (event.target.innerText === 'Update') {
itemName.innerText = newItemInput.value;
newItemInput.value = '';
editBTN.innerText = 'Edit';
} else {
console.log('dfdfdfdf');
itemName.innerHTML = '';
newItemInput.type = 'text';
newItemInput.className = 'newItemInput';
itemName.appendChild(newItemInput);
newItemInput.focus();
editBTN.innerText = 'Update';
}
});
<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>
英文:
Since we are reusing the Edit button as the Update button, have a conditional within the event listener to check which state it is, by checking its text content:
editBTN.addEventListener('click', (event) => {
if (event.target.innerText === 'Update') {
// …
} else {
console.log('dfdfdfdf');
itemName.innerHTML = '';
// …
}
});
We don't need the updateItem()
function.
In the truthy if
branch:
// Set the item name to the value inside the `<input>`, removing the `<input>`.
itemName.innerText = newItemInput.value;
// Set the `<input>` back to empty for the next edit.
newItemInput.value = '';
// Revert the Update button text back to Edit.
editBTN.innerText = 'Edit';
Putting it all together:
<!-- begin snippet: js hide: false console: true babel: false -->
<!-- language: lang-js -->
const itemName = document.querySelector('.item_name');
const editBTN = document.querySelector('.item_edit');
const newItemInput = document.createElement('input');
editBTN.addEventListener('click', (event) => {
if (event.target.innerText === 'Update') {
itemName.innerText = newItemInput.value;
newItemInput.value = '';
editBTN.innerText = 'Edit';
} else {
console.log('dfdfdfdf');
itemName.innerHTML = '';
newItemInput.type = 'text';
newItemInput.className = 'newItemInput';
itemName.appendChild(newItemInput);
newItemInput.focus();
editBTN.innerText = 'Update';
}
});
<!-- language: lang-html -->
<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>
<!-- end snippet -->
通过集体智慧和协作来改善编程学习和解决问题的方式。致力于成为全球开发者共同参与的知识库,让每个人都能够通过互相帮助和分享经验来进步。
评论