0

Código HTML, CSS y JS

Cuando le doy click a unos de los botones, que se muestre como flex-direction: row o column dependiendo donde le diste.

HTML donde pongo el contenedor flex y los elementos flex..

JS: Creamos las funciones para cuando le demos click hagan su funcion de poner en flex-direction: row o column;

CSS le damos al contenedor display flex y alos items flex-direction.

    <div id="container">
        <div id="item">1</div>
        <div id="item">2</div>
        <div id="item">3</div>
    </div>
  <button id="rowButton" onclick="rowButton()">Row</button>
  <button id="columnButton" onclick="columnButton()">Column</button>


// variable
var items = document.getElementById('item');

// Creación de funciónes
function rowButton() {
    if (items.style.flexDirection === "column") {
        items.style.flexDirection === "row";
    }
}

// Creación de otra función
function columnButton() {
    if (items.style.flexDirection === "row") {
        items.style.flexDirection === "column";
    }
}


//CSS estios
#container {
    display: flex;
}

#items {
    flex-direction: row;
}


1
  • Hola Ale, la proxima vez utiliza la opción editar para agregar la info en la pregunta.
    – Marcos
    el 16 ago. a las 16:11

1 respuesta 1

0

Te dejo un ejemplo mas dinámico, ademas de corregir la lógica que tienes, no estaba del todo mal, pero no era necesario obtener cada uno de los items, el importante es el contenedor padre, ya que a el le damos la orientación en este caso es container. Otra cosa que detecte y que no es muy viable es llamar la función desde el elemento HTML con onClick, revisa mi ejemplo:

//DETECTAMOS LA CARGA DEL DOM
window.addEventListener('load', function() {
  //OBTENEMOS EL CONTENEDOR, YA QUE A EL ES AL QUE LE CAMBIAREMOS LA ORIENTACION
  var contenedor = document.getElementById('container');
  //OBTENEMOS LOS BOTONES DINAMICAMENTE
  var boton = document.querySelectorAll('.button');

  //RECORREMOS TODOS LOS BOTONES QUE TENGAN LA CLASE .BUTTON
  boton.forEach(function(e) {
    //DETECTAMOS EL EVENTO CLICK Y SU ELEMENTO DETONADOR
    e.addEventListener('click', function() {
      //VERIFICAMOS EL NOMBRE EN BASE AL ID PARA DAR LA ORIENTACION
      if (e.id === "rowButton") {
        //LLAMAMOS LA FUNCION QUE CORRESPONDA
        rowButton()
      } else if (e.id === "columnButton") {
        //LLAMAMOS LA FUNCION QUE CORRESPONDA
        columnButton()
      }
      //console.log(e.id)
    })
  })

  //FUNCIONES INDEPENDIENTES DEL CAMBIO DE ORIENTACION
  function rowButton() {
    //PARA DAR ALGUN ESTILO SOLO ES CON UN '='
    contenedor.style.flexDirection = "row"
  }
  //FUNCIONES INDEPENDIENTES DEL CAMBIO DE ORIENTACION
  function columnButton() {
    contenedor.style.flexDirection = "column";
  }

})
#container {
  display: flex;
  flex-direction: row;
}
<div id="container">
  <div class="item">1</div>
  <div class="item">2</div>
  <div class="item">3</div>
</div>
<button id="rowButton" class='button'>Row</button>
<button id="columnButton" class='button'>Column</button>

Dime si te sirvio.

1
  • Grasias bro, si me sirvio.. bueno no era directamente con la clase.
    – Ale-int
    el 16 ago. a las 17:03

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.