Fixed links

Nathan3-14 · Sep 4, 2024 · b51a7f1 · b51a7f1
1 parent 14934a8
commit b51a7f1
Show file tree

Hide file tree

Showing 4 changed files with 50 additions and 11 deletions.
diff --git a/index.html b/index.html
@@ -10,9 +10,10 @@
 <body>
     <h1>Nathan3-14's Github Page</h1>
     <div id="pages">
-        <button class="link" id="menu">Menu</p></button>
-        <button class="link" id="bcp-shop"><p>BCP Shop</p></button>
-        <button class="link" id="magic"><p>Mathemagic</p></button>
+        <button class="link" id="menu">Menu</button><br>
+        <button class="link" id="info-square">Info Square</button><br>
+        <button class="link" id="magic">Mathemagic</button><br>
+        <button class="link" id="risk">Risk Calculator</button><br>
     </div>
     <script src="script.js"></script>
 </body>

diff --git a/script.js b/script.js
@@ -1,9 +1,10 @@
 var elements = document.getElementsByClassName("link")
-for (i=0; i<elements.len()-1; i++) {
+
+for (i=0; i<elements.length-1; i++) {
     var element = elements[i]
-    element.onclick = () => location.assign(element.id)
-}
-/*
-document.getElementById('menu').onclick = () => location.assign('menu');
-document.getElementById('bcp-shop').onclick = () => location.assign('bcp-shop');
-*/
+    console.log(element.id)
+    element.addEventListener("click", (event) => {
+        var button = event.target
+        location.assign(button.id)
+    })
+}
diff --git a/style.css b/style.css
@@ -19,4 +19,14 @@ body {
 @keyframes pan {
     from {background-position: 0%;}
     to {background-position: -200%;}
-}
+}
+
+button {
+    width: 100px;
+    background-color:cornflowerblue;
+    transition: width 0.4s, background-color 0.4s;
+}
+button:hover {
+    width: 150px;
+    background-color:cadetblue;
+}
diff --git a/test.html b/test.html
@@ -0,0 +1,27 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Button Self Reference</title>
+</head>
+<body>
+
+<!-- Button element -->
+<button id="myButton" onclick="handleClick(this)">Click Me</button>
+
+<!-- JavaScript function -->
+<script>
+function handleClick(buttonElement) {
+    // Access the button's properties via the buttonElement parameter
+    const buttonId = buttonElement.id;
+    const buttonText = buttonElement.innerText;
+
+    // Log the button's properties
+    console.log('Button ID:', buttonId);
+    console.log('Button Text:', buttonText);
+}
+</script>
+
+</body>
+</html>