JavaScript实现网页点击文本切换图片：代码无法运行求助

你的代码无法运行的核心原因是JavaScript函数名大小写不匹配：你定义的函数是ChangeImage（首字母大写），但HTML里调用的是changeimage（全小写），JS是大小写敏感的语言，所以无法找到对应函数。

另外，使用<a>标签触发时，点击会默认跳转页面（即使href="#"也会跳转到页面顶部），需要阻止这个默认行为。

修正后的完整代码 #

1. JavaScript 代码

function ChangeImage(fileName) {
  const img = document.querySelector('#bannerImage');
  img.setAttribute('src', fileName);
}

2. 按钮触发的HTML代码

<img id="bannerImage" src="https://via.placeholder.com/600x100" width="600" />
<br />
<br />
<button onClick="ChangeImage('image1.jpg')">Image 1</button>
<button onClick="ChangeImage('image2.jpg')">Image 2</button>
<button onClick="ChangeImage('image3.jpg')">Image 3</button>

3. 文本链接触发的HTML代码

在onClick里添加return false来阻止默认跳转行为：

<img id="bannerImage" src="https://via.placeholder.com/600x100" width="600" />
<br />
<br />
|
<a href="#" onClick="ChangeImage('image1.jpg'); return false;">Image One</a> | 
<a href="#" onClick="ChangeImage('image2.jpg'); return false;">Image Two</a> |
<a href="#" onClick="ChangeImage('image3.jpg'); return false;">Image Three</a> |

额外说明 #

• 确保image1.jpg、image2.jpg、image3.jpg这些图片文件和你的HTML文件在同一目录下，或者使用正确的相对/绝对路径。
• 如果想更规范地处理事件，可使用addEventListener代替内联onClick，示例如下：

// 页面加载完成后绑定事件
document.addEventListener('DOMContentLoaded', function() {
  const img = document.querySelector('#bannerImage');
  const links = document.querySelectorAll('.image-link');
  
  links.forEach(link => {
    link.addEventListener('click', function(e) {
      e.preventDefault(); // 阻止默认跳转
      const fileName = this.dataset.image;
      img.src = fileName;
    });
  });
});

对应的HTML：

<img id="bannerImage" src="https://via.placeholder.com/600x100" width="600" />
<br />
<br />
|
<a href="#" class="image-link" data-image="image1.jpg">Image One</a> | 
<a href="#" class="image-link" data-image="image2.jpg">Image Two</a> |
<a href="#" class="image-link" data-image="image3.jpg">Image Three</a> |

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