title: Cannot replace html text field
body: <p>I am trying to create a simple to do list project. When the user inputs an item, it stores the data in the data structure which contains three arrays for the three different types of activity. I keep receiving an error message "Cannot read property 'replace' of undefined" against this line: newHtml = html.replace('%activity%', obj.activity); when trying to replace the html placeholder text with the text that the user inputs when adding a new item to the UI.</p>
  
  <p>Here is the Javascript code: </p>
  
  <pre><code>addListItem: function(obj, type) {
    var html, newHtml;
  
    //1. create HTML string with placeholder text
  
    if (type === 'health') {
  
      html = '&lt;div class="item row" id="health-%id%"&gt;&lt;p class="item_description"&gt;%activity%&lt;/p&gt;&lt;p class="item_start"&gt;%start%&lt;/p&gt;&lt;p class="until"&gt;until&lt;/p&gt;&lt;p class="item_end"&gt;%end%&lt;/p&gt;&lt;p class="item_percentage"&gt;5%&lt;/p&gt;&lt;button class="delete_btn"&gt;&lt;i class="ion-ios-close-outline"&gt;&lt;/i&gt;&lt;/button&gt;&lt;/div&gt;';
  
    } else if (type === 'work') {
  
      html = '&lt;div class="item row" id="work-%id%"&gt;&lt;p class="item_description"&gt;%activity%&lt;/p&gt;&lt;p class="item_start"&gt;%start%&lt;/p&gt;&lt;p class="until"&gt;until&lt;/p&gt;&lt;p class="item_end"&gt;%end%&lt;/p&gt;&lt;p class="item_percentage"&gt;5%&lt;/p&gt;&lt;button class="delete_btn"&gt;&lt;i class="ion-ios-close-outline"&gt;&lt;/i&gt;&lt;/button&gt;&lt;/div&gt;';
  
    } else if (type === 'leisure') {
  
      html = '&lt;div class="item row" id="leisure-%id%"&gt;&lt;p class="item_description"&gt;%activity%&lt;/p&gt;&lt;p class="item_start"&gt;%start%&lt;/p&gt;&lt;p class="until"&gt;until&lt;/p&gt;&lt;p class="item_end"&gt;%end%&lt;/p&gt;&lt;p class="item_percentage"&gt;5%&lt;/p&gt;&lt;button class="delete_btn"&gt;&lt;i class="ion-ios-close-outline"&gt;&lt;/i&gt;&lt;/button&gt;&lt;/div&gt;';
  
    }
  
    // 2. replace placeholder with some actual text 
    newHtml = html.replace('%activity%', obj.activity);
    newHtml = newHtml.replace('%id%', obj.id);
    newHtml = newHtml.replace('%start%', obj.startTime);
    newHtml = newHtml.replace('%end%', obj.endTime);
  
  
    // 3. insert HTML into the DOM
    document.querySelector(DOMstrings.list).insertAdjacentHTML('beforeend', newHtml);
  
  },
  </code></pre>
  
  <p>The activity text is originally taken from this public method:</p>
  
  <pre><code>return {
    getInput: function() {
      return {
        type: document.querySelector(DOMstrings.inputType).value,
        activity: document.querySelector(DOMstrings.inputActivity).value,
        startTime: document.querySelector(DOMstrings.inputStart).value,
        endTime: document.querySelector(DOMstrings.inputEnd).value
      };
    },
  </code></pre>
  
  <p>I have tried to debug the code using breakpoints and it keeps saying 'type is undefined' against the if/else statements. </p>
  
  <p>Here's how I am calling the addListItem function (number 3):</p>
  
  <pre><code>// 1. get the field input data 
          var usersInput = UICtrl.getInput();
  
          // 2. add item to the activity controller arrays
          newItem = activityCtrl.addItem(usersInput.type, usersInput.activity, usersInput.startTime, usersInput.endTime);
  
          // 3. add the new item(s) to the UI (into the correct position depending on what the time is)
          UICtrl.addListItem(newItem);
  </code></pre>