如何通过函数在HTML中实现点击按钮将绿鹦鹉图片切换为蓝鹦鹉？

首先，给<img>标签添加一个id属性，让脚本能精准定位到要修改的图片元素：

<img id="parakeetImg" src="green_parakeet.jpg">

接着，在页面中插入<script>标签，定义一个切换图片的函数——这个函数会通过id获取图片元素，然后修改它的src属性值：

function changeParakeetColor() {
  const img = document.getElementById('parakeetImg');
  img.src = 'blue_parakeet.jpg';
}

最后，给按钮加上onclick属性，指定点击时调用上面定义的函数：

<button onclick="changeParakeetColor()">Change color!</button>

把所有部分整合后，完整的HTML代码如下：

<!DOCTYPE html>
<html>
<body>
  <img id="parakeetImg" src="green_parakeet.jpg">
  <button onclick="changeParakeetColor()">Change color!</button>

  <script>
    function changeParakeetColor() {
      const img = document.getElementById('parakeetImg');
      img.src = 'blue_parakeet.jpg';
    }
  </script>
</body>
</html>

如果需要实现点击切换两种图片的功能（可选扩展），可以修改函数来判断当前图片的来源：

function changeParakeetColor() {
  const img = document.getElementById('parakeetImg');
  if (img.src.includes('green_parakeet.jpg')) {
    img.src = 'blue_parakeet.jpg';
  } else {
    img.src = 'green_parakeet.jpg';
  }
}

内容的提问来源于stack exchange，提问作者Dina Chen