基于按钮选择实现内容显隐的JavaScript新手求助

Hey there! Let's walk through fixing your code—since you're new to JavaScript, we'll break down every issue and build a working version that matches your goal: showing the first question, then displaying the right follow-up based on the user's answer.

First, Let's Spot the Issues in Your Original Code #

• HTML onclick mistakes: Writing onclick="#option1-yes" doesn't do anything useful—onclick needs to call a JavaScript function, not just point to an ID. Also, your content blocks and follow-up buttons aren't grouped or hidden by default, so everything shows up at once.
• JavaScript errors:
  • getElementByClass isn't a real method—it's getElementsByClassName (note the plural "Elements").
  • if (.click('.option1yes')) isn't valid syntax; you can't check clicks like that. You need to bind click events to your buttons or use the onclick attribute to trigger a function.

Here's the Fixed, Working Code #

We'll add a little CSS to hide content by default, clean up the HTML structure, and write simple JavaScript to handle the show/hide logic.

HTML

<p>Do you want to go for a swim?</p>
<button onclick="showContent('option1-yes')" class="option1yes">Yes</button>
<button onclick="showContent('option1-no')" class="option1no">No</button>

<!-- Yes option content + follow-up -->
<div id="option1-yes" class="hidden">
  <p>Let's go to the water park! There's a water park around the corner from you.</p>
  <button onclick="showContent('option2-yes')">Sounds Fun</button>
  <button onclick="showContent('option2-no')">I want to do something else</button>
</div>

<!-- No option content + follow-up -->
<div id="option1-no" class="hidden">
  <p>Let's go to the mall! There's a mall 15 miles away from you.</p>
  <button onclick="showContent('option3-yes')">Sounds Fun</button>
  <button onclick="showContent('option3-no')">I want to do something else</button>
</div>

<!-- Final option placeholders -->
<div id="option2-yes" class="hidden">
  <p>Great! Grab your swimsuit and let's head out!</p>
</div>
<div id="option2-no" class="hidden">
  <p>No problem—what do you feel like doing instead?</p>
</div>
<div id="option3-yes" class="hidden">
  <p>Awesome! Let's check out the new food court there.</p>
</div>
<div id="option3-no" class="hidden">
  <p>No worries—let's pick another activity!</p>
</div>

CSS

.hidden {
  display: none;
}

JavaScript

function showContent(contentId) {
  // Hide all content blocks first to avoid overlapping
  const allContentBlocks = document.querySelectorAll('.hidden');
  allContentBlocks.forEach(block => {
    block.classList.add('hidden');
  });

  // Show the specific content block matching the passed ID
  const targetContent = document.getElementById(contentId);
  targetContent.classList.remove('hidden');
}

How This Works #

1. CSS: The .hidden class hides any element we don't want to show initially. We added this class to all follow-up content blocks so only the first question is visible at the start.
2. HTML: Each button calls the showContent function with the ID of the content it should display. We grouped related content (like the yes response + its buttons) into <div>s to keep the structure clean.
3. JavaScript: The showContent function first hides all content blocks, then finds the one with the ID we passed and removes the .hidden class to show it. This ensures only the right content is visible at each step.

Quick Tips for Your Next JavaScript Project #

• Always check the browser's console (F12 > Console tab) for errors—it'll tell you exactly where things went wrong!
• Use getElementById when you need one specific element (since IDs are unique), and querySelectorAll when you need multiple elements matching a class or selector.

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