Alternative via Klasse
bearbeitet von
@@Raketenwilli
Nö. Eher so:
```html
<html>
<head>
<title>Test</title>
</head>
<body>
<h1>Test</h1>
<p class="showOnActiveJs" id="foo" hidden="">FOO</p>
<p class="showOnActiveJs" id="bar" hidden="">BAR</p>
<p class="showOnActiveJs" id="baz" hidden="">BAZ</p>
<script>
Array.from(
document.getElementsByClassName('showOnActiveJs')
).forEach(
function ( item ) {
item.hidden = false;
}
);
</script>
</body>
</html>
```
`document.getElementsByClassName('showOnActiveJs')`{:.language-js} liefert eine `HTMLCollection`.
`document.querySelectorAll('.showOnActiveJs')`{:.language-js} liefert eine `NodeList` – da kannst du `forEach()`{:.language-js} drauf anwenden und brauchst das `Array.from()`{:.language-js} nicht:
```js
document.querySelectorAll('.showOnActiveJs').forEach(
function ( item ) {
item.hidden = false;
}
);
```
Gern auch mit Pfeilfunktion:
```js
document.querySelectorAll('.showOnActiveJs').forEach( item => {
item.hidden = false;
});
```
Oder hat mit Schleife:
```js
for (let item of document.querySelectorAll('.showOnActiveJs') {
item.hidden = false;
}
```
Möglicherweise will man auch auf die Klasse `showOnActiveJs` verzichten und die Elemente anhand ihrer ID selektieren:
```js
document.querySelectorAll('#foo, #bar, #baz').forEach( item => {
item.hidden = false;
});
```
bzw.
```js
for (let item of document.querySelectorAll('#foo, #bar, #baz') {
item.hidden = false;
}
```
🖖 Живіть довго і процвітайте
{:@uk}
--
*When the power of love overcomes the love of power the world will know peace.*{:@en}
— Jimi Hendrix