Question

我在my website上有一个使用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 = function（）{

    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' works in IE, but not in 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;
}

我的JavaScript代码在Mozilla Firefox中无法正常运行

2 个答案: