Widget:Guides/PlatformSwitcher: Difference between revisions
Jump to navigation
Jump to search
No edit summary |
No edit summary |
||
| (3 intermediate revisions by the same user not shown) | |||
| Line 1: | Line 1: | ||
<form> | <form> | ||
<fieldset> | <fieldset id="platform-switcher"> | ||
<legend>Select your operating system:</legend> | <legend>Select your operating system:</legend> | ||
| Line 23: | Line 23: | ||
<script type="module" defer> | <script type="module" defer> | ||
const containers = document.querySelectorAll('.platform-specific'); | const containers = document.querySelectorAll('.platform-specific'); | ||
switch_thing('windows'); | |||
function | 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) { | for (const x of containers) { | ||
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>