making help button into anchor

Author: hellpanderrr

wiktionary_pron/css/style.css

@@ -222,9 +222,16 @@ body i.icon-moon {
 #help_button {
     color: black;
     padding: 3px 15px 5px 15px;
+}
+
+#help_button_link {
+    display: inline-block;
+    margin-left: 10px;
+    text-decoration: none;
     position: absolute;
-    display: none;
+
 }
+
 #header {
     display: flex;
     flex-direction: row;

wiktionary_pron/index.html

@@ -60,8 +60,10 @@ <h1 style="flex: 1;">Online IPA Converter</h1>
 
 
             </select>
-            <button id="help_button" type="button" title="Help for selected language" style="margin-left: 10px;">?
-            </button>
+            <a id="help_button_link" href="#" target="_blank" rel="noopener noreferrer"
+               style="display: none; margin-left: 10px; text-decoration: none;">
+                <button id="help_button" type="button" title="Help for selected language">?</button>
+            </a>
             <p id="loading_text"></p>
         </div>
         <div>

wiktionary_pron/scripts/main.js

@@ -617,18 +617,16 @@ async function updateOptionsUponLanguageSelection(event) {
   console.log("changing language to ", selectedLanguage);
 
   // Update help button
-  const helpButton = document.getElementById("help_button");
-  if (helpButton) {
+  const helpButtonLink = document.getElementById("help_button_link");
+  if (helpButtonLink) {
     if (selectedLanguage && selectedLanguage !== "-- select an option --") {
-      helpButton.style.display = "inline-block";
-      helpButton.onclick = () => {
-        const helpUrl = `help/${selectedLanguage
-          .toLowerCase()
-          .replace(/\s+/g, "_")}.html`;
-        window.open(helpUrl, "_blank");
-      };
+      const helpUrl = `help/${selectedLanguage
+        .toLowerCase()
+        .replace(/\s+/g, "_")}.html`;
+      helpButtonLink.style.display = "inline-block";
+      helpButtonLink.href = helpUrl;
     } else {
-      helpButton.style.display = "none";
+      helpButtonLink.style.display = "none";
     }
   }