title: referencing an object literal to set innerHTML in a span element javascript
body: <p>I have a small data store of quotes like this:</p>
  
  <pre><code>let quotes = [{
     quote: "Search others for their virtues, thyself for thy vices.",
     source: "Benjamin Franklin",
     citation: "Poor Richard\'s Almanac",
     category: "ethics",
     year: ''
   }, {
     quote: "He who has courage despises the future.",
     source: "Napoleon Bonaparte",
     citation: '',
     category: "boldness",
     year: ''
  }
  ]
  </code></pre>
  
  <p>I am running a simple javascript function to change the html based on the data store with this:</p>
  
  <pre><code>const getRandomQuote = () =&gt; {
      let quoteShownArr = [];
      let quoteIndex = Math.floor((Math.random() * quotes.length) + 1);
      for (let i = 0; i &lt; quotes.length; i++) {
        if (quoteIndex === i) {
          document.getElementsByTagName("P")[0].innerHTML = quotes[i].quote;
          document.getElementsByTagName("P")[1].innerHTML = quotes[i].source;
            let citation = quotes[i].citation;
            if(citation) {
            console.log(citation);
            document.getElementById("citation").innerHTML = quotes[i].citation;
          }
            document.getElementById("year").innerHTML = quotes[i].year;
        }
      }
    }
    getRandomQuote();
  </code></pre>
  
  <p>All the html elements are being updated except for my citation and year, which are span elements.  I get the following error:
  TypeError: "Cannot set property 'innerHTML' of null
      at getRandomQuote" But the exact value consoles easily.  How is this not changing the element??
  Thanks.
  HTML added:</p>
  
  <pre><code>&lt;!DOCTYPE html&gt;
  &lt;html lang="en"&gt;
  &lt;head&gt;
    &lt;meta charset="UTF-8"&gt;
    &lt;title&gt;Random Quotes&lt;/title&gt;
    &lt;link href='https://fonts.googleapis.com/css?family=Playfair+Display:400,400italic,700,700italic' rel='stylesheet' type='text/css'&gt;
    &lt;link rel="stylesheet" href="css/normalize.css"&gt;
    &lt;link rel="stylesheet" href="css/styles.css"&gt;
  &lt;/head&gt;
  &lt;body&gt;
    &lt;div class="container"&gt;
      &lt;div id="quote-box"&gt;
        &lt;p class="quote"&gt;You can do anything but not everything&lt;/p&gt;
        &lt;p class="source"&gt;David Allen&lt;span class="citation" id="citation"&gt;Making It All Work&lt;/span&gt;&lt;span class="year" id="year"&gt;2009&lt;/span&gt;&lt;/p&gt;
      &lt;/div&gt;
      &lt;button id="loadQuote"&gt;Show another quote&lt;/button&gt;
    &lt;/div&gt;
    &lt;script src="js/script.js"&gt;&lt;/script&gt;
  &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>