Switched from using JS to HTML to switch content in iframes

FiredAnt8442448 · Apr 8, 2024 · 1f1c016 · 1f1c016
1 parent 928e17e
commit 1f1c016
Show file tree

Hide file tree

Showing 2 changed files with 8 additions and 14 deletions.
diff --git a/An1wk11/Links.html b/An1wk11/Links.html
@@ -8,13 +8,13 @@
     </head>
     <body>
         <div class="navigation">
-            <button onclick="parent.changeContent('Main.html')" class="grow">Home</button>
-            <button onclick="parent.changeContent('Mt_Nebo.html')" class="grow">Mt. Nebo</button>
-            <button onclick="parent.changeContent('Mt_Timpanogos.html')" class="grow">Mt. Timpanogos</button>
-            <button onclick="parent.changeContent('Lone_Peak.html')" class="grow">Lone Peak</button>
-            <button onclick="parent.changeContent('Mt_Olympus.html')" class="grow">Mt. Olympus</button>
-            <button onclick="parent.changeContent('Grandeur_Peak.html')" class="grow">Grandeur Peak</button>
-            <button onclick="parent.changeContent('Mt_Ben_Lomond.html')" class="grow">Mt. Ben Lomond</button>
+            <a href="Main.html" target="contentFrame"><button class="grow">Home</button></a>
+            <a href="Mt_Nebo.html" target="contentFrame"><button class="grow">Mt. Nebo</button></a>
+            <a href="Mt_Timpanogos.html" target="contentFrame"><button class="grow">Mt. Timpanogos</button></a>
+            <a href="Lone_Peak.html" target="contentFrame"><button class="grow">Lone Peak</button></a>
+            <a href="Mt_Olympus.html" target="contentFrame"><button class="grow">Mt. Olympus</button></a>
+            <a href="Grandeur_Peak.html" target="contentFrame"><button class="grow">Grandeur Peak</button></a>
+            <a href="Mt_Ben_Lomond.html" target="contentFrame"><button class="grow">Mt. Ben Lomond</button></a>
         </div>
     </body>
 </html>
diff --git a/An1wk11/index.html b/An1wk11/index.html
@@ -5,17 +5,11 @@
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
     <title>Wasatch Mountains</title>
     <link rel="stylesheet" href="style.css">
-    <script>
-      function changeContent(pageToLoad) {
-        var contentFrame = document.getElementById('contentFrame');
-        contentFrame.src = pageToLoad;
-      }
-    </script>
   </head>
   <body>
     <div class="container">
       <iframe src="Links.html" class="navigation" id="navigationFrame"></iframe>
-      <iframe src="Main.html" class="content" id="contentFrame"></iframe>
+      <iframe src="Main.html" class="content" name="contentFrame"></iframe>
     </div>
   </body>
 </html>