Converted the dropdown map selector to radio buttons

vulture-boy · Oct 30, 2023 · f930e6a · f930e6a
1 parent bd2d537
commit f930e6a
Show file tree

Hide file tree

Showing 2 changed files with 10 additions and 9 deletions.
diff --git a/index.html b/index.html
@@ -54,12 +54,12 @@
                 <div class="menu__content">
 
                     <div id="areaList" class="active">
-                        <div><label for="mapSelector">Change Map:</label>
-                            <select name="mapSelector" id="mapSelector" onchange="toggleMapStyle()">
-                                <option value="redrawn">Redrawn</option>
-                                <option value="original">Original</option>
-                            </select>
-                        </div><br>
+                        <div style="text-align: center;">
+                            <input type="radio" id="mapSelectRedrawn" name="mapSelect" value="redrawn" checked onchange="toggleMapStyle()">
+                            <label for="mapSelectRedrawn">Redrawn</label>
+                            <input type="radio" id="mapSelectOriginal" name="mapSelect" value="original" onchange="toggleMapStyle()">
+                            <label for="mapSelectOriginal">Original</label>
+                        </div>
                         <hr>
                         <ul id="areas"></ul>
                     </div>

diff --git a/interactive.js b/interactive.js
@@ -270,14 +270,15 @@ function buildMap () {
 }
 
 function toggleMapStyle () {
-    var dropdown = document.getElementById('mapSelector')
+    var selectRedrawn = document.getElementById('mapSelectRedrawn');
+    var selectOriginal = document.getElementById('mapSelectOriginal');
     var lastMapStyle = currentMapStyle;
 
-    if (dropdown.value === "redrawn") 
+    if (selectRedrawn.checked) 
     {
         currentMapStyle = NEW_STYLE_NAME;
     }
-    if (dropdown.value === "original") 
+    if (selectOriginal.checked) 
     {
         currentMapStyle = OLD_STYLE_NAME;
     }