点击按钮切换视频源功能失效求助：代码问题排查

嘿，我帮你找到问题根源啦！你的代码里藏着一个容易忽略的大小写错误，这就是所有按钮点击后没反应的原因。

问题所在 #

JavaScript是严格区分大小写的语言：你在函数定义里的参数是buttonLink（大写的L），但在函数内部赋值时却写成了buttonlink（小写的L）。这个拼写差异导致程序找不到对应的变量，自然无法完成视频源的切换。

修正后的完整代码 #

HTML部分

<button onClick="changevid('videos/vid1.mp4')">Video 1</button>
<button onClick="changevid('videos/vid2.mp4')">Video 2</button>
<button onClick="changevid('videos/vid3.mp4')">Video 3</button>
<video controls id="change">
  <source src="videos/Vid1.mp4" type="video/mp4">
</video>

JavaScript部分

<script language="javascript" type="text/javascript">
function changevid(buttonLink) {
  // 修正变量名大小写，同时优化视频源更新逻辑
  const videoElement = document.getElementById('change');
  const sourceElement = videoElement.querySelector('source');
  sourceElement.src = buttonLink;
  // 更新后调用load()让视频元素识别新资源，可选play()实现自动播放
  videoElement.load();
  // videoElement.play(); // 如果需要点击按钮后自动播放，可取消注释这行
}
</script>

额外优化说明 #

直接修改video元素的src属性虽然也能生效，但更规范的做法是修改内部<source>标签的src，再调用load()方法让视频元素重新加载资源，这样能更好地兼容不同浏览器的视频处理逻辑。

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