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

【问题标题】：My JavaScript code isn't working properly in Mozilla Firefox我的 JavaScript 代码在 Mozilla Firefox 中无法正常工作
【发布时间】：2014-11-14 12:27:50
【问题描述】：

我在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，但这也不起作用！

有什么想法吗？

【问题讨论】：

将它切换到.textContent 为我修复了它。确保在所有地方都进行更改

标签： javascript firefox cross-browser

【解决方案1】：

innerText 已被弃用。尝试改用 textContent 。

此问题已在此处描述： 'innerText' works in IE, but not in Firefox

【讨论】：

OP 已经说过他们尝试过textContent 并没有什么不同。
是的，我已经尝试过textContent，但很高兴知道innerText 已被弃用。与此同时，我会继续玩它。
@Michael：正如我上面所说，.textContent 修复了它。如果它没有修复它，那么要么你错过了一些地方，要么你的浏览器缓存了脚本，所以它仍在读取旧的。

【解决方案2】：

使用.textContent 并在console 中记录listItem，您会看到它们的构造正确。以下是您的代码稍作更改。在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;
}

【讨论】：