Básicamente, estoy tratando de tener un div en flexbox que contenga otros divs y quiero poder cambiar la dirección flexible haciendo clic en dos botones encima de él.
<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>Soy nuevo en JS y no puedo encontrar nada que funcione. ¿Alguna ayuda?
data-* para asignar un atributo personalizado con valordataset de JS para recuperar el valor de data-*type="button" en botones de elementos de acción que no sean del tipo submitonclick (como se sugiere incorrectamente en otras respuestas), a menos que esté creando Elementos nuevos desde la memoria. Use addEventListener() en su lugar: // 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>Usando la función addEventListener() :
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>