编辑文字按钮不起作用

Question

I'm trying to make an edit "button" that, when clicked, will launch a prompt window where you can enter new text that will replace the old text. 我正在尝试创建一个编辑“按钮”，单击该按钮将启动一个提示窗口，您可以在其中输入将替换旧文本的新文本。 The issue, I think, is that there is not an "edit button" in the html, it is created when an item is added to the to-do list. 我认为问题在于html中没有“编辑按钮”，而是在将项目添加到待办事项列表时创建的。 So I am having trouble targeting the text I want to replace. 因此，我无法定位要替换的文字。

Right now the "EditItem" function replaces the Edit button with the text I want, not the To-Do item. 现在，“ EditItem”功能将“编辑”按钮替换为我想要的文本，而不是“待办事项”项。 Any advice would really be appreciated!! 任何建议，将不胜感激！

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

Looking at this function in your codes 在您的代码中查看此功能

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

    }

change this line this.textContent = newText; 更改此行this.textContent = newText; to 至

this.previousElementSibling.previousElementSibling.innerHTML = newText;

here is the snippet 这是片段

 //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 个解决方案

解决方案1
0 已采纳 2015-12-23 01:51:42

编辑文字按钮不起作用

问题描述

1 个解决方案

解决方案1 0 已采纳 2015-12-23 01:51:42

解决方案1
0 已采纳 2015-12-23 01:51:42