Unable to set property 'src' of undefined or null reference
<p>I am trying to use a button to change a picture on my webpage. When assigning a new value to the <code>src</code> attribute I have below error</p>

<blockquote>
  <p>Unable to set property 'src' of undefined or null reference</p>
</blockquote>

<p>My code is below:</p>

<pre><code>&lt;nav&gt;
  &lt;ul class="menuitem"&gt;
    &lt;li&gt;&lt;a href="#Introduction"&gt;Introduction&lt;/a&gt;&lt;/li&gt;
    &lt;li&gt;&lt;a href="#Experience"&gt;Experience&lt;/a&gt;&lt;/li&gt;
    &lt;li&gt;&lt;a href="#Skills"&gt;Skills&lt;/a&gt;&lt;/li&gt;
    &lt;li&gt;&lt;a href="#Courses"&gt;Courses&lt;/a&gt;&lt;/li&gt;
    &lt;li&gt;&lt;a href="#Links"&gt;Links&lt;/a&gt;&lt;/li&gt;
    &lt;li&gt;&lt;a href="#Contact"&gt;Contact&lt;/a&gt;&lt;/li&gt; 
  &lt;/ul&gt;
  &lt;id ="navImg"&gt;
    &lt;img src="C:\Users\toffy\Desktop\Course\CMP\Web-based\Worksheets\Tools\cat-selfie.jpg" alt="CatSelfie"style="width:125px;height:75px;" /&gt;
  &lt;/id&gt;
  &lt;button type="button" onclick="imgUpdate()"&gt;Another image&lt;/button&gt;&lt;/button&gt; 
  &lt;script&gt;
    function imgUpdate(){ 
      document.getElementById("navImg").src="C:\Users\toffy\Desktop\Course\CMP\Web-based\Worksheets\Tools\foo.jpg";
    }
  &lt;/script&gt;
&lt;/nav&gt;
</code></pre>