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是标记的 ATTRIBUTE ，它不是标记本身：

<img id="navImg" ...>

即使它是标记，您也要设置src标记的<id>，而不是img，并且实际上有

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

Answer 2

清理了一些HTML后，JavaScript代码按预期工作

＆＃13;

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

＆＃13;

<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>

＆＃13;

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

2 个答案: