クリックすると、古いテキストを置き換える新しいテキストを入力できるプロンプトウィンドウが起動する編集「ボタン」を作成しようとしています。問題は、HTML に「編集ボタン」がなく、To Do リストに項目が追加されたときに作成されることだと思います。そのため、置き換えたいテキストをターゲットにするのに問題があります。
現在、「EditItem」関数は、[編集] ボタンを To-Do 項目ではなく、必要なテキストに置き換えています。アドバイスをいただければ幸いです!!
<html>
<head>
<title> To Do List</title>
<style>
body{
font: sans-serif;
color: #00b33c;
background-color: #ffffff;
}
p{
font: sans-serif;
width: auto;
}
ul {
list-style: none;
padding: 0;
margin: 0;
width: 500px;
}
li {
border: 2px solid #fff;
background: #e5ffff;
padding: 10px 10px;
color: #000000;
width: 500px;
}
li span{
padding-left: 10px;
padding-right: 200px;
}
.checked{
text-decoration: line-through;
font-weight: bold;
color: #ff0000;
}
li span2{
position: relative;
padding: 0 5px 0 5px;
margin: 10px;
font-size: 12px;
cursor: pointer;
border: 1px solid #000000;
background-color: #ffffff;
}
li span3{
font-size: 12px;
padding: 0 5px 0 5px;
position: relative;
cursor: pointer;
border: 1px solid #000000;
background-color: #ffffff;
}
}
</style>
</head>
<body>
<h1> To Do List</h1>
<p>
<input type="text" id="inItemText">
<button id="btnAdd">Add</button>
</p>
<ul id="todoList"></ul>
<script src="todolist.js"></script>
</body>
</html>
Javascript
//CheckBox Feature
function updateStatus() {
var cbId = this.id.replace("cb_", "");
var itemText = document.getElementById("item_" + cbId);
if (this.checked) {
itemText.className = "checked";
} else {
itemText.className = "";
}
}
//Delete Button
function deleteItem(){
this.parentNode.parentNode.removeChild(this.parentNode);
inItemText.focus();
inItemText.select();
}
//Edit Button
function editItem(e){
var newText = prompt("What would you like to change this to?");
if(newText !== null){
this.textContent = newText;
}
else{
alert("You must add something");
}
}
//Add new item to To-Do List
function addNewItem(list, itemText) {
totalItems++;
var listItem = document.createElement("li");
var checkbox = document.createElement("input");
checkbox.type = "checkbox";
checkbox.id = "cb_" + totalItems;
checkbox.onclick = updateStatus;
var span = document.createElement("span");
span.id = "item_" + totalItems;
span.textContent = itemText;
var spanDelete = document.createElement("span2");
spanDelete.setAttribute("id", listItem.id);
spanDelete.setAttribute("class", "delete");
spanDelete.textContent = "DELETE";
spanDelete.onclick = deleteItem;
var spanEdit = document.createElement("span3")
spanEdit.id = "editId_" + totalItems;
spanEdit.textContent = "EDIT";
spanEdit.onclick = editItem;
listItem.appendChild(checkbox);
listItem.appendChild(span);
listItem.appendChild(spanDelete);
listItem.appendChild(spanEdit);
list.appendChild(listItem);
}
//Add item to list with ENTER KEY
var totalItems = 0;
var inItemText = document.getElementById("inItemText");
inItemText.focus();
inItemText.onkeyup = function(event){
if(event.which === 13){
var itemText = inItemText.value;
if (!itemText || itemText === "" || itemText === " ") {
return false;
}
addNewItem(document.getElementById("todoList"), itemText);
inItemText.focus();
inItemText.select();
}
//Add item to To-Do List with "Add" Button
var btnNew = document.getElementById("btnAdd");
btnNew.onclick = function() {
var itemText = inItemText.value;
if (!itemText || itemText === "" || itemText === " ") {
return false;
}
btnNew.onkeyup = function(event){
if(event.which == 13){
if (!itemText || itemText === "" || itemText === " ") {
return false;
}
}
}
addNewItem(document.getElementById("todoList"), itemText);
inItemText.focus();
inItemText.select();
}
}