title: My JavaScript code isn't working properly in Mozilla Firefox
body: <p>I have a to-do list application on <a href="http://www.michaelmanhire.com/portfolio/just_do_it.html" rel="nofollow">my website</a> that I built using JavaScript. It works perfectly in Google Chrome, but it doesn't work in Mozilla Firefox. I have read that each browser interprets JavaScript differently, but I haven't been able to pinpoint exactly what the problem is in the code.</p>
  
  <p>So, what happens in Firefox is this: When you type something into the text input and click the "Add Task" button, it does show that a task has been added. However, the label appears blank, as do the Edit and Delete buttons. All of the functionality appears to work as normal (the Edit and Delete buttons work properly, they just don't display the text).</p>
  
  <p>In the code, the each list item is created by a function called <code>createTask</code>. Its code is:</p>
  
  <pre><code>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;
  }
  </code></pre>
  
  <p>Then, the function <code>addTask</code> appends <code>listItem</code> to the unordered list that is the tasks list.</p>
  
  <p>var addTask = function() {</p>
  
  <pre><code>    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();
      }
  }
  </code></pre>
  
  <p>Looking more closely, within the <code>createTask</code> function, there is:</p>
  
  <pre><code>    label.innerText = taskString;
      editButton.innerText = "Edit";
      deleteButton.innerText = "Delete";
  </code></pre>
  
  <p>So, I thought that the <code>innerText</code> property may not work properly in Firefox, but I tried changing it to <code>innerHTML</code> and <code>textContent</code>, and that doesn't work either!</p>
  
  <p>Any ideas?</p>