Question

我正在尝试制作一个编辑“按钮”，单击此按钮将启动一个提示窗口，您可以在其中输入将替换旧文本的新文本。我认为，问题在于html中没有“编辑按钮”，它是在项目添加到待办事项列表时创建的。所以我无法定位要替换的文本。

现在，“EditItem”功能将“编辑”按钮替换为我想要的文本，而不是“待办事项”。任何建议真的很感激!!

<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();

}
}

Answer 1

在您的代码中查看此功能

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");
     }

    }

将此行this.textContent = newText;更改为

this.previousElementSibling.previousElementSibling.innerHTML = newText;

这是片段

//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.previousElementSibling.previousElementSibling.innerHTML = 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();

}
}

        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;
        }

        }

    <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>

编辑文本按钮不起作用

1 个答案: