After reviewing your code, there are a few areas that need to be corrected. Firstly, it's important to note that length is a property and not a method, so there is no need to use the () suffix when calling it. Also, in HTML, the correct attribute is class, not className. Lastly, if the parent container shares the same class as the elements being hidden, all child elements will also be hidden regardless of having display: block applied.
Once these issues are fixed, your updated code should look like this:
function showPanel(id) {
var elements = document.getElementsByClassName("panel");
for (let i = 0; i < elements.length; i++) {
elements[i].style.display = "none";
}
document.getElementById(id).style.display = "block";
}
<button onclick="showPanel('p1')">test1</button>
<button onclick="showPanel('p2')">test2</button>
<button onclick="showPanel('p3')">test3</button>
<div class="content">
<div id="p1" class="panel">
<p>TEST1</p>
</div>
<div id="p2" class="panel">
<p class="other">TEST2</p>
</div>
<div id="p3" class="panel">
<p class="other">TEST3</p>
</div>
</div>
It's important to mention that using onX attributes is outdated and not recommended. A better approach would involve utilizing unobtrusive event handlers while providing custom metadata to the event handler through the use of data attributes placed on the elements.
The revised version of the logic would appear as follows:
let buttons = document.querySelectorAll('button');
let panels = document.querySelectorAll('.panel');
buttons.forEach(button => {
button.addEventListener('click', e => {
panels.forEach(panel => {
panel.style.display = panel.id === e.target.dataset.panel ? 'block' : 'none';
});
});
});
<button data-panel="1">test1</button>
<button data-panel="2">test2</button>
<button data-panel="3">test3</button>
<div class="content">
<div id="1" class="panel">
<p>TEST1</p>
</div>
<div id="2" class="panel">
<p class="other">TEST2</p>
</div>
<div id="3" class="panel">
<p class="other">TEST3</p>
</div>
</div>