请求协助将JavaScript函数归位并调试网站功能

Hey Paulo, let's get this sorted out step by step—no confusing jargon, just clear, working code you can drop right into your site. First, I noticed your function got cut off at the end, so let's fix that and make sure your content switching works reliably.

1. Complete the funcaosabores1() Function #

Your original code was on the right track, but the last line was truncated. Here's the full, working version that hides all other content panels and shows only contento1:

<script>
function funcaosabores1() {
  // Clear the content of the "testeagora1" element (as you intended)
  document.getElementById("testeagora1").innerHTML = "";
  
  // Show the first content panel, hide the rest
  document.getElementById('contento1').style.visibility = "visible";
  document.getElementById('contento2').style.visibility = "hidden";
  document.getElementById('contento3').style.visibility = "hidden";
  document.getElementById('contento4').style.visibility = "hidden"; // Fixed the truncated line
}
</script>

2. Match Your HTML Structure to the JavaScript #

For this function to work, you need corresponding elements in your HTML. Here's a sample structure you can adapt to your site's content:

<!-- Trigger Button - clicks run your function -->
<button onclick="funcaosabores1()">Show Flavor 1 Content</button>
<!-- Add buttons for other flavors later if needed, e.g.:
<button onclick="funcaosabores2()">Show Flavor 2 Content</button>
-->

<!-- Element that gets cleared when the button is clicked -->
<div id="testeagora1">This text will disappear when you click the button</div>

<!-- Content Panels - set initial visibility to hidden -->
<div id="contento1" style="visibility: hidden;">
  <h3>Flavor 1</h3>
  <p>Your details about flavor 1 go here...</p>
</div>

<div id="contento2" style="visibility: hidden;">
  <h3>Flavor 2</h3>
  <p>Your details about flavor 2 go here...</p>
</div>

<div id="contento3" style="visibility: hidden;">
  <!-- Flavor 3 content here -->
</div>

<div id="contento4" style="visibility: hidden;">
  <!-- Flavor 4 content here -->
</div>

3. Add Functions for Other Content Panels (Optional) #

If you want buttons to switch to other flavors, copy the base function and adjust the visibility settings. For example, here's funcaosabores2():

function funcaosabores2() {
  document.getElementById("testeagora1").innerHTML = "";
  
  document.getElementById('contento1').style.visibility = "hidden";
  document.getElementById('contento2').style.visibility = "visible";
  document.getElementById('contento3').style.visibility = "hidden";
  document.getElementById('contento4').style.visibility = "hidden";
}

4. Simplify with a Reusable Function (Pro Tip) #

To avoid writing almost identical functions for each flavor, use a single reusable function that takes the target panel ID as a parameter. This makes your code cleaner and easier to update later:

<script>
function showContentPanel(targetId) {
  // Clear the testeagora1 element
  document.getElementById("testeagora1").innerHTML = "";
  
  // Hide all content panels first
  const allPanels = document.querySelectorAll('[id^="contento"]');
  allPanels.forEach(panel => {
    panel.style.visibility = "hidden";
  });
  
  // Show the selected panel
  document.getElementById(targetId).style.visibility = "visible";
}
</script>

Then your buttons can use this simplified function like so:

<button onclick="showContentPanel('contento1')">Show Flavor 1</button>
<button onclick="showContentPanel('contento2')">Show Flavor 2</button>
<button onclick="showContentPanel('contento3')">Show Flavor 3</button>
<button onclick="showContentPanel('contento4')">Show Flavor 4</button>

Quick Troubleshooting Checks #

• Double-check that all element IDs in your HTML match exactly what's in the JavaScript (IDs are case-sensitive—Contento1 is not the same as contento1).
• If panels aren't switching, open your browser's developer tools (press F12) and check the Console tab for error messages—this will tell you if an element can't be found.

内容的提问来源于stack exchange，提问作者Paulo Henrique Bueno