Widget:Guides/PlatformSwitcher: Difference between revisions
Jump to navigation
Jump to search
No edit summary |
No edit summary |
||
| (One intermediate revision by the same user not shown) | |||
| Line 28: | Line 28: | ||
for (const elem of fieldset.querySelectorAll('input')) { | for (const elem of fieldset.querySelectorAll('input')) { | ||
elem.addEventListener('change', () => | elem.addEventListener('change', () => switch_thing(elem.value)) | ||
} | } | ||
| Line 35: | Line 35: | ||
x.style.display = "none" | x.style.display = "none" | ||
} | } | ||
document. | const platform_elems = document.querySelectorAll('.' + value); | ||
platform_elems.forEach(x => x.style.display = "block"); | |||
} | } | ||
</script> | </script> | ||
Latest revision as of 23:36, 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>
<script type="module" defer> 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', () => switch_thing(elem.value))
}
function switch_thing(value) {
for (const x of containers) {
x.style.display = "none"
}
const platform_elems = document.querySelectorAll('.' + value);
platform_elems.forEach(x => x.style.display = "block");
} </script>