无法设置未定义或空引用的属性“src”

Question

我试图用一个按钮来改变我的网页上的图片。当向src属性分配一个新值时，我有以下错误

无法设置未定义或空引用的属性“src”

我的代码如下：

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

Answer 1

您可以通过不编写自己的HTML标记来修复它。<id>不是有效的html标记句号。ID是标记的属性，它不是标记本身：

<img id="navImg" ...>

即使它是一个标记，您也会设置<id>标记的<id>，而不是img，并且实际上

<id =navImg src="...">

Answer 2

清除了一些HTML之后，JavaScript代码就像预期的那样工作。

​

function imgUpdate(){
   var img = document.getElementById("navImg");   img.src="https://i.stack.imgur.com/6UgUs.jpg?s=328&g=1";
}

<nav>
  
  <ul class="menuitem">
    <li><a href="#Introduction">Introduction</a></li>
    <li><a href="#Experience">Experience</a></li>
    <li><a href="#Skills">Skills</a></li>
    <li><a href="#Courses">Courses</a></li>
    <li><a href="#Links">Links</a></li>
    <li><a href="#Contact">Contact</a></li> 
  </ul>
  <img id="navImg" src="https://www.gravatar.com/avatar/058c57b7a3c00e7d4e8a010ace61889a?s=32&d=identicon&r=PG&f=1" alt="CatSelfie"style="width:125px;height:75px;" />
  <button type="button" onclick="imgUpdate()">Click for another image</button>

​