Widget:Guides/PlatformSwitcher: Difference between revisions

Revision as of 23:34, 6 December 2024

<form>

 <fieldset id="platform-switcher">
   <legend>Select your operating system:</legend>

   <label>
     <input type="radio" name="platform" value="windows" checked /> Windows
   </label>

   <label>
     <input type="radio" name="platform" value="macos" /> macOS
   </label>

   <label>
     <input type="radio" name="platform" value="linux" /> Linux
   </label>

   <label>
     <input type="radio" name="platform" value="haiku" /> Haiku
   </label>
 </fieldset>

</form>

const fieldset = document.getElementById("platform-switcher");

for (const elem of fieldset.querySelectorAll('input')) {

 elem.addEventListener('change', () => console.log(elem.value))

}

function switch_thing(value) {

 for (const x of containers) {
   x.style.display = "none"
 }
 document.querySelector('.' + value).style.display = "block";

} </script>

@@ Line 1: / Line 1: @@
 <form>
-   <fieldset>
+   <fieldset id="platform-switcher">
      <legend>Select your operating system:</legend>
@@ Line 24: / Line 24: @@
 const containers = document.querySelectorAll('.platform-specific');
 switch_thing('windows');
+const fieldset = document.getElementById("platform-switcher");
+for (const elem of fieldset.querySelectorAll('input')) {
+  elem.addEventListener('change', () => console.log(elem.value))
+}
 function switch_thing(value) {