JavaScript DOM问题：按钮onclick失效，函数未调用或背景图未更新

嘿，我来帮你搞定这两个小问题！咱们一步步拆解：

一、图片切换按钮失效的核心问题 #

你在cartman()和kenny()函数里踩了个常见的坑：img元素的src是它自身的属性，不是CSS样式属性。你现在写的document.getElementById("image").style.src相当于在找不存在的CSS样式，肯定没用呀！

正确的写法应该直接修改img元素的src属性：

function cartman() {
  document.getElementById("image").src = "cartman.png";
}
function kenny() {
  document.getElementById("image").src = "kenny.png";
}

二、背景图未生效的可能原因 #

start()函数的逻辑本身没问题，window.onload = start;也能保证页面加载完成后触发函数。如果背景图还是没显示，大概率是这两个原因：

• 图片路径错误：确认sothback.png和你的HTML文件在同一目录，或者路径写对了（比如放在images文件夹里的话要写成url('./images/sothback.png')）
• 浏览器缓存搞鬼：按Ctrl+F5强制刷新页面，清掉缓存试试

修正后的完整代码 #

给你整理好的完整可运行代码，替换后应该就能正常工作了：

脚本代码 #

<script type="text/javascript" >
function start() {
  document.body.style.backgroundImage = "url('sothback.png')";
  document.body.style.backgroundSize = "100%";
  document.body.style.backgroundRepeat = "repeat-y";
}
window.onload = start;
function cartman() {
  document.getElementById("image").src = "cartman.png";
}
function kenny() {
  document.getElementById("image").src = "kenny.png";
}
</script>

HTML主体代码 #

<body>
 <div style="width: 100%; height: 700px;">
 <button onclick="kenny()">Kenny</button>
 <button onclick="cartman()">cartman</button>
 <div style="height: 400px;"></div>
 <center><img src="kenny.png" alt="img" id="image" ></center>
 </div>
</body>

试一下，现在按钮应该能正常切换图片，背景图也会在页面加载完成后显示啦！

内容的提问来源于stack exchange，提问作者Dan Love Programming