Replace buttons with anchors

More semantically accurate and allows link preview on hover

diff --git a/index.html b/index.html
index 8882e6a7587a1d4943fbd4c1be04380a35d3a1ca..d4cf2cb610d598707780e0c56ca82b7c5ff291c4 100644 (file)
--- a/index.html
+++ b/index.html
@@ -10,10 +10,10 @@
 
 <body>
   <header>
-    <button data-router data-route="home">Go to the home page</button>
-    <button data-router data-route="page_1">Go to page 1</button>
-    <button data-router data-route="page_2">Go to page 2</button>
-    <button data-router data-route="page_3">Go to page 3</button>
+    <a data-router data-route="home" href="/home">Go to the home page</a>
+    <a data-router data-route="page_1" href="/page_1">Go to page 1</a>
+    <a data-router data-route="page_2" href="/page_2">Go to page 2</a>
+    <a data-router data-route="page_3" href="/page_3">Go to page 3</a>
   </header>
 
   <main>
@@ -75,7 +75,10 @@
 
     // Set event handlers
     for (const router of routers) {
-      router.addEventListener('click', e => route(e.target.dataset.route));
+      router.addEventListener('click', e => {
+        e.preventDefault();
+        route(e.target.dataset.route)
+      });
     }
     window.onpopstate = _ => showPage(window.location.pathname.substring(1));