Member Avatar for igwegbelaw

html and CSS coding of navigation elements, Home, About, Contact... came out fine when ran on local browser, challenge is i used DOM get and create to prepare the click values of each but on click of each of home, contact... nothing happened! planning to try the following tell me if i am right or help me to the track: create a page each for Home, Contact About... saved Thus about.html, index.html for home contact.html in the html code replace the # in the href with the respective file names thus: <li><a href="about.html">About</a></li> etc is this right to fix my challenge? thanks.

  • 2 Contributors
  • 2 Replies
  • 126 Views
  • 1 Day Discussion Span
  • Latest Post Latest Post by igwegbelaw

Dani AI

Generated

Summary and practical fixes tied to and

Common causes when navigation clicks appear to do nothing:

  • A JavaScript error stops execution before click handlers run — check the console for exceptions.
  • Handlers are bound before the links exist (script runs too early or links are created later).
  • CSS or an overlay element blocks pointer events (check computed pointer-events, z-index, and layout in Inspector).
  • Anchors are being intercepted but no navigation or view update is performed (handlers call preventDefault without a fallback).

Quick diagnostic checklist:

  1. Open DevTools console and look for errors.
  2. Inspect the links in Elements to confirm they are present and not covered by another element.
  3. Verify the script runs after the DOM is ready (use DOMContentLoaded or place scripts just before </body>).
  4. If links are created dynamically, either attach listeners after creation or use event delegation on a stable ancestor.
  5. If anchors are intended to navigate to other pages, ensure they contain real targets; if they are for JS-driven view changes, handle the click and update the UI.

A small, robust pattern using delegation (bind once and handle all current/future links):

document.addEventListener('DOMContentLoaded', function () {
  document.body.addEventListener('click', function (e) {
    var a = e.target.closest('a');
    if (!a) return;
    e.preventDefault();
    var href = a.getAttribute('href') || '';
    console.log('clicked link:', href);
    // navigate or swap views here; e.g.:
    // location.href = href;   // for normal navigation
    // or load content into the page for single-page behavior
  });
});

References for the APIs used: DOMContentLoaded, event handling, and Element.closest on MDN (DOMContentLoaded, addEventListener, Event.preventDefault, Element.closest).

Recommended Answers

All 2 Replies

Member Avatar for Member #120589

Perhaps it would be an idea to post your relevant code. Your description isn't very helpful.

Member Avatar for igwegbelaw

ok. html code
<ul>
<li><a href="#">Home</a ></li>
<li><a href="#">About</a></li>
<li><a href="#">Contact</a></li>
</ul>

Be a part of the DaniWeb community

We're a friendly, industry-focused community of developers, IT pros, digital marketers, and technology enthusiasts meeting, networking, learning, and sharing knowledge.