复刻星巴克展示项目时JavaScript点击切换功能失效求助

Hey, let's troubleshoot why your thumbnail clicks aren't triggering any changes— I went through your code and spotted a few key issues that are likely causing this:

1. Unclosed main image tag #

Your main Starbucks image element isn't properly closed, which can make the browser fail to recognize it as a valid DOM node. This means document.querySelector('.starbucks') can't find the element to update its source.

Fix it by closing the <img> tag:

<div class="imgBox">
  <img src="img/img1.png" class="starbucks" /> <!-- Added closing slash -->
</div>

2. Incorrect image path in the imgSlider function #

When you call imgSlider('img1.png'), you're passing just the filename—but your main image uses the full path img/img1.png. The browser will look for img1.png in the root folder instead of the img subfolder, so the image won't load, and you won't see a change.

You can fix this in two ways:

• Option 1: Update the function to add the folder path automatically

  function imgSlider(anything){
    document.querySelector('.starbucks').src = `img/${anything}`;
  }
  

• Option 2: Pass the full path when calling the function

  <li><img src="img/thumb1.png" onclick="imgSlider('img/img1.png');changeCircleColor('#017143')"></li>
  <li><img src="img/thumb2.png" onclick="imgSlider('img/img2.png');changeCircleColor('#eb7495')"></li>
  <li><img src="img/thumb3.png" onclick="imgSlider('img/img3.png');changeCircleColor('#d752b1')"></li>
  

3. Missing <circle> element in your HTML #

Your changeCircleColor function tries to target a <circle> element, but there's no such element in your provided HTML. If this is a decorative background circle, you need to add it first—for example:

<!-- Add this somewhere in your body, like outside the .content div -->
<div class="circle"></div>

Then update the function to target the class instead of a non-existent tag:

function changeCircleColor(color){
  const circle = document.querySelector('.circle'); // Changed to class selector
  circle.style.background = color;
}

Without this element, the function will throw an error, which can stop other JavaScript code from running too.

4. Check browser console for errors #

Always open your browser's developer tools (press F12) and go to the Console tab when testing. If you see errors like "Cannot set property 'src' of null" or "Cannot read property 'style' of null", those will directly tell you which element isn't being found—super helpful for quick debugging!

Fixing these issues should get your thumbnail click functionality working as expected. Let me know if you run into any other problems!

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