我的 JavaScript 代码在 Mozilla Firefox 中无法正常工作

Question

我的网站上有一个使用 JavaScript 构建的待办事项列表应用程序。它在 Google Chrome 中完美运行，但在 Mozilla Firefox 中不起作用。我了解到每个浏览器对 JavaScript 的解释不同，但我无法准确指出代码中的问题所在。

因此，Firefox 中发生的情况是这样的：当您在文本输入中键入内容并单击“添加任务”按钮时，它确实显示已添加任务。但是，该标签显示为空白，“编辑”和“删除”按钮也是如此。所有功能似乎都正常工作（“编辑”和“删除”按钮工作正常，只是不显示文本）。

在代码中，每个列表项都是由名为

createTask

的函数创建的。它的代码是：

var createTask = function(taskString) {
    // taskString is the value of the text input (whatever the user wants the task to read)

    // Create Elements
    var listItem = document.createElement("li");
    var checkbox = document.createElement("input");
    var label = document.createElement("label");
    var editInput = document.createElement("input");
    var editButton = document.createElement("button");
    var deleteButton = document.createElement("button");

    // Modify Elements
    checkbox.type = "checkbox";
    label.innerText = taskString;
    editInput.type = "text";
    editButton.innerText = "Edit";
    deleteButton.innerText = "Delete";

    // Add Event Listeners
    checkbox.addEventListener("change", markTask);
    editButton.addEventListener("click", editTask);
    deleteButton.addEventListener("click", deleteTask);

    // Append the Elements to the List Item
    listItem.appendChild(checkbox);
    listItem.appendChild(label);
    listItem.appendChild(editInput);
    listItem.appendChild(deleteButton);
    listItem.appendChild(editButton);

    return listItem;
}

然后，函数

addTask

将

listItem

添加到无序列表（即任务列表）中。

var addTask = 函数() {

    if (addInput.value === "") {
        addError.style.display = "block"; // Display error message if no input
    } else {
        addError.style.display = "none"; // Stop displaying error message
        var listItem = createTask(addInput.value); // Put user input into createTask function
        tasksList.appendChild(listItem); // Add the new list item to the unordered list
        addInput.value = ""; // Reset the text input field to blank
        addInput.focus();
    }
}

仔细观察，在

createTask

函数中，有：

    label.innerText = taskString;
    editButton.innerText = "Edit";
    deleteButton.innerText = "Delete";

所以，我认为

innerText

属性在 Firefox 中可能无法正常工作，但我尝试将其更改为

innerHTML

和

textContent

，但这也不起作用！

有什么想法吗？

Answer 1

innerText 已弃用。 尝试使用 textContent 代替。

这个问题已在这里描述： 'innerText' 在 IE 中有效，但在 Firefox 中无效

Answer 2

使用

.textContent

并在

listItem

中记录

console

，您将看到它们已正确构建。下面是您的代码，经过一些小改动。在

firefox

中进行了测试：

var createTask = function(taskString) {
    // taskString is the value of the text input (whatever the user wants the task to read)
    // Create Elements
    var listItem = document.createElement("li");
    var checkbox = document.createElement("input");
    var label = document.createElement("label");
    var editInput = document.createElement("input");
    var editButton = document.createElement("button");
    var deleteButton = document.createElement("button");

    // Modify Elements
    checkbox.type = "checkbox";
    label.textContent = taskString;
    editInput.type = "text";
    editButton.textContent = "Edit";
    deleteButton.textContent = "Delete";
//alert(deleteButton.textContent);
    // Add Event Listeners
 // checkbox.addEventListener("change", markTask);  // commented these because i do not had these objects.
   // editButton.addEventListener("click", editTask);
   // deleteButton.addEventListener("click", deleteTask);

    // Append the Elements to the List Item
    listItem.appendChild(checkbox);
    listItem.appendChild(label);
    listItem.appendChild(editInput);
    listItem.appendChild(deleteButton);
    listItem.appendChild(editButton);

console.log(listItem);
    return listItem;
}