创建一个按钮以在样式的行和列之间切换 flex-direction

Question

I am tying to create a button that will toggle a style flex-direction between "row" and "column"

The code I tried was based on some other code that I used for toggling the display between "flex" and "none".

I can't use Id's because there a multiple non contiguous element.

I TRIED THE CODE BELOW

 function setDisplay(className, displayValue) { var items = document.getElementsByClassName(className); for (var i=0; i < items.length; i++) { items[i].style.flexDirection = displayValue; } } function showResponsive() { var elements = document.getElementsByClassName("main"); Array.prototype.forEach.call(elements, function(el) { if (el.style.flex-direction === "column") { el.style.flex-direction = "row"; } else { el.style.flex-direction = "column"; } }); }

 .green{ background:green; width:300px; height:300px; } .red{ background:red; width:300px; height:300px; } .black{ background:black; width:300px; height:300px; } .main{ display:flex; flex-direction:column }

 <div><i>Click switch</i></div> <div> <label class="switch"> <input type="checkbox" onclick="showResponsive()" > <span class="slider round"></span> </label> </div> <div class="main"> <div class="green"></div> <div class="red"></div> <div class="black"></div> </div>

The code above is based on the code below which works for changing the style.display between "flex" and "none"

function setDisplay(className, displayValue) {
    var items = document.getElementsByClassName(className);
    for (var i=0; i < items.length; i++) {
      items[i].style.flexDirection = displayValue;
    }
}
function showResponsive() {
    var elements = document.getElementsByClassName("main");
    Array.prototype.forEach.call(elements, function(el) {
      if (el.style.flex-direction === "column") {
          el.style.flex-direction = "row";
      } else {
          el.style.flex-direction = "column";
      }
    });
}

Answer 1

Replace your JavaScript code with the following code:

function showResponsive () {
    var elements = document.getElementsByClassName("main");
    Array.prototype.forEach.call(elements, function(el) {
      if (el.style.flexDirection === "column") {
          el.style.flexDirection = "row";
      } else {
          el.style.flexDirection = "column";
      }
    });
}

Answer 2

The property names on the style object are in camel-case and not kebab-case. So when setting the flex direction use:

el.style.flexDirection = "row";