Question

0

138

Views

Adding class to a <div> with JS by clicking a button

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?

about 4 years ago · Juan Pablo Isaza

2 answers

Answer question

0

Answer question

Find remote jobs

Answer 1 · 2022-07-03T12:10:36.525Z

Use data-* to assign a custom attribute with value
Use JS's dataset to retrieve the data-* value
Use type="button" on action elements buttons that are not of type submit
Don't use unique classNames. Class should be common, IDs should be unique
Never use onclick 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>

Answer 2 · 2022-07-03T12:10:36.533Z

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>

0

138

Adding class to a <div> with JS by clicking a button

2 answers

0

0

Find remote jobs

Andres GPT