So bascially I am trying to have a div in flexbox that contains other divs and I want to be able to change flex-direction by clicking two buttons above it.
<body>
<div>
<button class="button-1">Display Column</button>
<button class="button-2">Display Row</button>
</div>
<div class="main">
<div class="container-1">One</div>
<div class="container-2">Two</div>
<div class="container-3">Three</div>
</div>
<style>
.main{
display: flex;
}
</style>
</body>
I am new to JS and I cant find anything that would work. Any Help?
data-* to assign a custom attribute with valuedataset to retrieve the data-* valuetype="button" on action elements buttons that are not of type submitonclick handlers (as wrongly suggested in other answers) , unless you're creating brand new Elements from in-memory. Use addEventListener() instead:// DOM utility functions:
const ELS = (sel, par) => (par || document).querySelectorAll(sel);
const EL = (sel, par) => (par || document).querySelector(sel);
// Task:
const changeDirection = (evt) => {
const direction = evt.currentTarget.dataset.direction;
EL(".main").style.flexDirection = direction;
};
ELS("[data-direction]").forEach(EL_btn => EL_btn.addEventListener("click", changeDirection));.main {
display: flex;
}<div>
<button type="button" data-direction="column">Display Column</button>
<button type="button" data-direction="row">Display Row</button>
</div>
<div class="main">
<div>One</div>
<div>Two</div>
<div>Three</div>
</div>Using addEventListener() function:
let mainDiv = document.querySelector('.main');
document.querySelector('.button-1').addEventListener('click', () => {
mainDiv.style.flexDirection = 'column';
});
document.querySelector('.button-2').addEventListener('click', () => {
mainDiv.style.flexDirection = 'row';
});.main {
display: flex;
}<div>
<button class="button-1">Display Column</button>
<button class="button-2">Display Row</button>
</div>
<div class="main">
<div class="container-1">One</div>
<div class="container-2">Two</div>
<div class="container-3">Three</div>
</div>