网页行星图片切换功能故障：点击左右按钮后img src未正常变更

Hey there! Let's figure out why your planet image switching isn't working, and fix it up step by step.

核心问题分析 #

First off, the main bug breaking your code is the invalid use of the continue keyword in your leftClick() and rightClick() functions:

• continue is only meant to be used inside loop structures (like for, while, or do-while). Using it in an if-else block will throw a syntax error, which stops the entire function from running—so your pos variable never updates, and the image source never changes.

修复后的代码 #

Here's the fixed version of your JavaScript, plus a cleaner way to handle the image paths (no more messy switch statement!):

let pos = 0;
// Store all planet image paths in an array for easier management
const planetImages = [
  "planet1.jpg",
  "planet2.jpg",
  "planet3.webp",
  "planet4.jpg",
  "planet5.jpg",
  "planet6.jpg",
  "planet7.jpg",
  "planet8.jpg"
];

function leftClick() {
  if (pos > 0) {
    pos--;
    updatePlanetImage();
  }
  // No need for continue—just do nothing if pos is already 0
}

function rightClick() {
  if (pos < planetImages.length - 1) {
    pos++;
    updatePlanetImage();
  }
  // Same here—do nothing if pos is at the last index
}

function updatePlanetImage() {
  const imgElement = document.getElementById("planetImage");
  // Make sure the image element exists before updating its src
  if (imgElement) {
    imgElement.src = planetImages[pos];
  }
}

And your HTML can stay the same (just double-check that the script tag is properly placed, preferably right before the closing </body> tag to ensure elements are loaded before the JS runs):

<button onclick="leftClick()">LEFT</button>
<img src="planet1.jpg" id="planetImage" width="480" height="520" align="center">
<button onclick="rightClick()">RIGHT</button>

额外优化说明 #

• Using an array to store image paths makes it way easier to add/remove planets later, without editing a huge switch statement.
• We added a check for the image element in updatePlanetImage() to avoid errors if the element doesn't exist for some reason.
• Replaced the hardcoded 7 with planetImages.length - 1—this makes the code dynamic, so if you add more images later, you don't have to remember to update that number.

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