Hello so I have tabs using javascript:
function openScreen(screen, button) {
let i;
const tabContent = document.getElementsByClassName("tab-content");
const tabButton = document.getElementsByClassName("tab-button");
for (i = 0; i < tabContent.length; i++) {
tabContent[i].style.display = "none";
}
document.getElementById(screen).style.display = "block";
for (i = 0; i < tabButton.length; i++) {
tabButton[i].classList.remove('active');
}
document.getElementById(button).classList.add('active');
}<div class="tab-links">
<button id="login-button" class="active tab-button" onclick="openScreen('Login', 'login-button')">Login</button>
<button id="register-button" class="tab-button" onclick="openScreen('Register', 'register-button')">Register</button>
</div>
<div>
<div id="Login" class="tab-content">
<p>Login</p>
</div>
<div id="Register" class="tab-content" style="display:none">
<p>Register</p>
</div>
</div>And this is working, but I want to do this without passing any parameters to function and do it without using onclick function. But I dont image how I should achieve this.
This is a perfect task for event delegation. You register one even listener for the click event on the element that wraps the buttons and the content. In that event listener, you can use e.target is the element from which the event originated. e.currentTarget is the one on which the listener was attached.
In the listener, you need to figure out if it was really the button. Which could be done by checking for a certain property (in this case for the data-target attribute)
function openScreen(tabContainer, button) {
// remove active class from tab-content and tab-button in the current tab container
tabContainer.querySelectorAll(".tab-content.active, .tab-button.active").forEach(elm => {
elm.classList.remove('active');
})
// add the active class to the button and the container set by the target
let screen = button.dataset.target;
document.getElementById(screen).classList.add('active');
button.classList.add('active');
}
// Add the delegate event listener to all tab-conainers
document.querySelectorAll(".tab-container").forEach(container => {
container.addEventListener('click', (e) => {
// check if the event happened on an element with the `data-target` attribute
if (e.target.dataset.target) {
const tabContainer = e.currentTarget
const button = e.target
openScreen(tabContainer, button)
}
})
}).tab-content {
display: none;
}
.tab-content.active {
display: block;
}<div class="tab-container">
<div class="tab-links">
<button id="login-button" data-target="Login" class="tab-button active">Login</button>
<button id="register-button" data-target="Register" class="tab-button">Register</button>
</div>
<div>
<div id="Login" class="tab-content active">
<p>Login</p>
</div>
<div id="Register" class="tab-content">
<p>Register</p>
</div>
</div>
</div>
<hr>
<div class="tab-container">
<div class="tab-links">
<button id="login-button2" data-target="Login2" class="tab-button active">Login2</button>
<button id="register-button2" data-target="Register2" class="tab-button">Register2</button>
</div>
<div>
<div id="Login2" class="tab-content active">
<p>Login2</p>
</div>
<div id="Register2" class="tab-content">
<p>Register2</p>
</div>
</div>
</div>You can do it with data attributes https://developer.mozilla.org/en-US/docs/Learn/HTML/Howto/Use_data_attributes
short example
<div class="tab" data-type="login"></div>
<div class="tab" data-type="register"></div>
Then
const tabs = document.querySelectorAll('.tab');
for (let tab of tabs) {
tab.onclick = function () {
const type = this.dataset.type;
/*now you can do all needed actions*/
}
}
Do you mean something like this?
function openScreen(e) {
const button = e.target;
const { screen } = button.dataset;
const tabs = document.querySelectorAll('.tab-content');
tabs.forEach(tab => tab.classList.toggle('active', screen === tab.id));
}
const buttons = document.querySelectorAll('button');
buttons.forEach(button => button.addEventListener('click', openScreen));.tab-content {
display: none;
}
.tab-content.active {
display: block;
}<div class="tab-links">
<button
id="login-button"
class="active tab-button"
data-screen="Login"
>Login</button>
<button
id="register-button"
class="tab-button"
data-screen="Register"
>Register</button>
</div>
<div>
<div id="Login" class="tab-content active">
<p>Login</p>
</div>
<div id="Register" class="tab-content">
<p>Register</p>
</div>
</div>