Change the flexbox gap property using Javascript

Question

I'm trying to change the flexbox gap property of a div when calling a JavaScript function, but I cannot seems to access it, here is the current code:

.bottomCont {
  position: absolute;
  display: flex;
  left: 25%;
  top: 80%;
  right: 25%;
  bottom: 0;
  flex-wrap: nowrap;
  align-items: center;
  margin: 5% 5%;
  justify-content: center;
  gap: 10%;
}

<div id="botCont" class="bottomCont">
  <div class="leftControls"></div>
  <div class="eraser">🚨 erase 🚨</div>
  <div class="rightControls"><button id="sizeGrid" class="gridSize">CHANGE GRID SIZE</button></div>
</div>

Here is what I've tried to add in the main.js file, none worked:

document.getElementById('botCont').style.gap = 40;
document.getElementById('botCont').style.flex.gap(40);
document.getElementsByClassName('bottomCont').css('gap', '40%')

I tried to use console.log to inspect but I do no get any returned value.

Answer 1

in gap property the value will be length like (px) or percentage. check mdn

in js file you will add value with length or percentage like this:

let changeGap = document.querySelector("#sizeGrid"),
    botCont = document.querySelector("#botCont");

changeGap.addEventListener("click", function () {
    botCont.style.gap = "20%";
});

        .bottomCont {
            position: absolute;
            display: flex;
            left: 25%;
            top: 80%;
            right: 25%;
            bottom: 0;
            flex-wrap: nowrap;
            align-items: center;
            margin: 5% 5%;
            justify-content: center;
            gap: 10%;
        }

    <div id="botCont" class="bottomCont">
        <div class="leftControls"></div>
        <div class="eraser">? erase ?</div>
        <div class="rightControls">
            <button id="sizeGrid" class="gridSize">CHANGE GRID SIZE</button>
        </div>
    </div>