JavaScript容器显示隐藏功能失效问题求助

Let's break down why your code isn't working and fix it right away:

Key Issues in Your Code #

• Wrong click event attribute: You used oneclick instead of the correct onclick attribute on your buttons. Browsers don't recognize oneclick, so your Show() and Hide() functions never get triggered when you click the buttons.
• Mismatched button text and functionality: Your first button says "Hide London" but runs the Show() function, and the second says "Show London" but runs Hide() — that's backwards, plus the text mentions "London" instead of your target container "Khenchela".
• Minor CSS class issue: Your class container 1 gets parsed as two separate classes (container and 1), and CSS class names shouldn't start with a number. It's not breaking the show/hide, but it's better practice to use something like container container-1 or container1.

Corrected Code #

JavaScript (logic stays the same, included for reference) #

function Show() { 
  document.getElementById('Khenchela').style.display = 'block' 
}
function Hide() { 
  document.getElementById('Khenchela').style.display = 'none' 
}

Fixed HTML #

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <link rel="stylesheet" type="text/css" href="3.css">
  <title>JAVA SCRIPT WEBSITE</title>
</head>
<body>
  <!-- Fixed onclick spelling, corrected button text and function pairing -->
  <button onclick="Show()">Show Khenchela</button>
  <button onclick="Hide()">Hide Khenchela</button>

  <!-- Fixed class name to follow CSS best practices -->
  <div id="Khenchela" class="container container-1">
    <h3>Khenchela</h3>
    <p>Khenchela is the Tadjalt city of Algeria </p>
  </div>
  <div id="Batna" class="container container-2">
    <h3>Batna </h3>
    <p>Batna is the Tnakt city of algeria</p>
  </div>
  <div id="Biskra" class="container container-3">
    <h3>Biskra</h3>
    <p>Biskra is the 'after' Tnakt city of algeria</p>
  </div>

  <script src="2.js" type="text/javascript"></script>
</body>
</html>

How It Works Now #

• Clicking "Show Khenchela" triggers the Show() function, setting the container's display to block (making it visible).
• Clicking "Hide Khenchela" triggers the Hide() function, setting the container's display to none (hiding it completely).

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