我正在創建一個待辦事項串列，我希望用戶能夠編輯和洗掉添加的任務，這可以通過readonly從 HTML 中洗掉屬性來實作。但我正在努力做編輯功能。
這是我的代碼：
const formulario=document.getElementById("new-task-form");
const lista=document.getElementById("list");
const input=document.querySelector("#new-task-input");
let id=0;
formulario.addEventListener('submit', (e)=>{
//console.log("activado");
e.preventDefault();
addTask();
});
let addTask=()=>{
id ;
let task=input.value;
lista.innerHTML =`<div id="tasks">
<div id="taskin">
<div id="${id}">
<input
id="${id}"
type="text"
value=${task}
readonly
/>
</div>
<div >
<button >Edit</button>
<button >Delete</button>
</div>
</div>
</div> `
input.value='';
}
lista.addEventListener('click', (evento)=>{
console.log(evento);
if(evento.target.className=="edit"){
console.log("Editar");
}else if(evento.target.className=="delete"){
console.log("Borrar");
}
}) <body>
<header>
<h1>Task List</h1>
<form action="#" id="new-task-form"> <!--Formulario para poner tareas-->
<input type="text" id="new-task-input" placeholder="Que vas a hacer" />
<input type="submit" id="new-task-submit" value="Add Task" />
</form>
</header>
<main>
<div id="list" class="task-list">
<h2>Tasks</h2>
<div id="tasks">
<!-- <div >
<div >
<input type="text"
value="My Task"
readonly
/>
</div>
<div >
<button >Edit</button>
<button >Delete</button>
</div>
</div> -->
</div>
</div>
</main>
<script src="app.js"></script>.
</body>
</html>提前致謝
uj5u.com熱心網友回復：
我在您的 JS 代碼中添加了一些行。請檢查。
lista.addEventListener('click', (evento)=>{
let parentEl = evento.target.parentNode.parentNode;
let input = parentEl.getElementsByTagName('input');
if(evento.target.className=="edit"){
console.log("Editar");
input[0].removeAttribute('readonly');
}else if(evento.target.className=="delete"){
console.log("Borrar");
}
})
在下面的代碼段中對其進行測驗：
const formulario=document.getElementById("new-task-form");
const lista=document.getElementById("list");
const input=document.querySelector("#new-task-input");
let id=0;
formulario.addEventListener('submit', (e)=>{
//console.log("activado");
e.preventDefault();
addTask();
});
let addTask=()=>{
id ;
let task=input.value;
lista.innerHTML =`<div id="tasks">
<div id="taskin">
<div id="${id}">
<input
id="${id}"
type="text"
value=${task}
readonly
/>
</div>
<div >
<button >Edit</button>
<button >Delete</button>
</div>
</div>
</div> `
input.value='';
}
lista.addEventListener('click', (evento)=>{
let parentEl = evento.target.parentNode.parentNode;
let input = parentEl.getElementsByTagName('input');
console.log(input[0]);
if(evento.target.className=="edit"){
input[0].removeAttribute('readonly');
console.log("Editar");
}else if(evento.target.className=="delete"){
console.log("Borrar");
}
})<body>
<header>
<h1>Task List</h1>
<form action="#" id="new-task-form"> <!--Formulario para poner tareas-->
<input type="text" id="new-task-input" placeholder="Que vas a hacer" />
<input type="submit" id="new-task-submit" value="Add Task" />
</form>
</header>
<main>
<div id="list" class="task-list">
<h2>Tasks</h2>
<div id="tasks">
<!-- <div >
<div >
<input type="text"
value="My Task"
readonly
/>
</div>
<div >
<button >Edit</button>
<button >Delete</button>
</div>
</div> -->
</div>
</div>
</main>
<script src="app.js"></script>.
</body>
</html>希望能幫助到你。
uj5u.com熱心網友回復：
首先，兩個元素具有相同
id的值：<div id="${id}">和<input id="${id}">您可以更改為：
const formulario=document.getElementById("new-task-form");
const lista=document.getElementById("list");
const input=document.querySelector("#new-task-input");
let id=0;
formulario.addEventListener('submit', (e)=>{
//console.log("activado");
e.preventDefault();
addTask();
});
let addTask=()=>{
id ;
let task=input.value;
lista.innerHTML =`<div id="tasks">
<div id="taskin">
<div id="${id}">
<input
id="input-${id}"
type="text"
value=${task}
readonly
/>
</div>
<div >
<button data-task_id="input-${id}">Edit</button>
<button data-task_id="input-${id}">Delete</button>
</div>
</div>
</div> `
input.value='';
}
lista.addEventListener('click', (evento)=>{
if(evento.target.className=="edit"){
document.getElementById(evento.target.dataset.task_id).removeAttribute('readonly');
}else if(evento.target.className=="delete"){
document.getElementById(evento.target.dataset.task_id).remove();
}
})<body>
<header>
<h1>Task List</h1>
<form action="#" id="new-task-form"> <!--Formulario para poner tareas-->
<input type="text" id="new-task-input" placeholder="Que vas a hacer" />
<input type="submit" id="new-task-submit" value="Add Task" />
</form>
</header>
<main>
<div id="list" class="task-list">
<h2>Tasks</h2>
<div id="tasks">
<!-- <div >
<div >
<input type="text"
value="My Task"
readonly
/>
</div>
<div >
<button >Edit</button>
<button >Delete</button>
</div>
</div> -->
</div>
</div>
</main>
<script src="app.js"></script>.
</body>
</html>uj5u.com熱心網友回復：
也許您的意思是洗掉readonly三個 div 內的文本框上的屬性？
$('.edit').click(function(){
$('.first_div input, .second_div input, .third_div input').removeAttr('readonly');
});
$('.edit_first').click(function(){
$('#first_textbox').removeAttr('readonly');
});
$('.edit_second').click(function(){
$('#second_textbox').removeAttr('readonly');
});
$('.edit_third').click(function(){
$('#third_textbox').removeAttr('readonly');
});<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="first_div">
<input readonly id="first_textbox">
</div>
<div class="second_div">
<input readonly id="second_textbox">
</div>
<div class="third_div">
<input readonly id="third_textbox">
</div>
<button class="edit">Edit All</button>
<button class="edit_first">Edit first textbox</button>
<button class="edit_second">Edit second textbox</button>
<button class="edit_third">Edit third textbox</button>轉載請註明出處，本文鏈接：https://www.uj5u.com/qiye/475507.html
標籤：javascript html jQuery dom