Change the flexbox gap property using Javascript

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.

>Solution :

You need to specify the unit as well, so

document.getElementById('botCont').style.gap = '40px';

or

document.getElementById('botCont').style.gap = '40%';