Interactivity with JavaScript

A menu opens, but its button still says it is closed

• A visible panel and its accessibility state can disagree. A reliable interaction updates both the content and the control that describes it.
• Browser JavaScript responds to user actions. Do not put private credentials in client code; visitors can inspect and change what runs on their machines.

Find the parsed elements

• The DOM 文档对象模型 represents the document as nodes as HTML is parsed. Code can query an existing node and change its properties.
• A script running before its target is parsed may get null. A deferred external script runs after parsing; a script at the end of the body can also work for elements already above it.

Register the response once

• An event 事件 records an action such as a click or form submission. addEventListener registers a function 函数 to run when that event is dispatched.
• Find the button and panel, register the listener, then update state on each click. Do not call the function while registering it if you mean to pass it as a handler.

Keep a usable fallback

• Save this as an HTML file. The links are initially visible; the toggle button appears only after its handler is ready.
• Click the button twice. Check that the panel and aria-expanded change together. The native button also responds to keyboard activation.

<!doctype html>
<html lang="en">
<head><meta charset="utf-8"><title>Club menu</title></head>
<body>
  <button id="menu-button" type="button" hidden
          aria-controls="menu-panel" aria-expanded="true">Menu</button>
  <nav id="menu-panel" aria-label="Club">
    <a href="#meeting">Meeting details</a>
  </nav>
  <main id="meeting"><h1>Meet Thursday in room 12</h1></main>
  <script>
    const button = document.querySelector('#menu-button');
    const panel = document.querySelector('#menu-panel');
    button.addEventListener('click', () => {
      panel.hidden = !panel.hidden;
      button.setAttribute('aria-expanded', String(!panel.hidden));
    });
    button.hidden = false;
  </script>
</body>
</html>

Separate helpful checks from trusted checks

• Browser validation can give quick feedback, but the server must validate submitted values and permissions independently. A caller can bypass or alter browser code.
• Use textContent to insert plain text rather than interpreting it as HTML. Check missing elements and errors before adding more features.

Trace two actions and a failure

• Record initial state and the state after two activations. Repeat using the keyboard, then check that essential navigation remains available without the script.
• Explain what runs in the browser and what still needs server checks. Test this local example without sending any real form data.