JS sliding divider

I am a green js coder but catching up very fast, I am coding my own sliding divider and I need help (code at the end):

#1 My code does not set the value back into dbase_area.style.Width so the main part will not shrink and the effect is not right... what am I doing wrong?

#2 I understand the Mouse code nice by now but why is the onmouseup code different, I mean wy did the code work with "document.onmouseup = (xx)" and not "function onMouseUp(xx)"? just like the first 2 blocks!

Thank you for your time!

code:

HTML:

<Screen >    <Left_tools id="Left_tools">  <h2>Left tools</h2>    </Left_tools>    <left_divider id="left_divider"></left_divider>    <dbase_area id="dbase_area">    <div class="content-section">    <ul>      <li><a href="#">line</a></li>      <li><a href="#">line</a></li>      <li><a href="#">line</a></li>    </ul>  </div>    </dbase_area>    <right_divider id="right_divider"></right_divider>    <right_tools id="right_tools">  <h2>Right tools</h2>  </right_tools>    </Screen>  

style:

 Screen{    height: 80%;    display: grid;    grid-template-columns: var(--Left_divider) 5px auto 5px var(--right_divider);    background-color: yellow;    }  

js:

   function dragElement(element)    {    const Left_tools = document.getElementById("Left_tools");  const left_divider = document.getElementById("left_divider");  const dbase_area = document.getElementById("dbase_area");    element.onmousedown = onMouseDown;    function onMouseDown(xx)  {      md = {xx,            Left_toolsWidth: Left_tools.offsetWidth,            left_dividerLeft: left_divider.offsetLeft,            dbase_areaWidth: dbase_area.offsetWidth,            dbase_areaLeft: dbase_area.offsetLeft           };      document.onmousemove = onMouseMove;    }    function onMouseMove(xx)  {         var delta = {x: xx.clientX - md.xx.clientX,                   y: xx.clientY - md.xx.clientY};        if (direction = "H" )      {              delta.x = Math.min(                    Math.max(delta.x, - md.Left_toolsWidth+1),                    + md.dbase_areaWidth/2);            Left_tools.style.width = (md.Left_toolsWidth + delta.x) + "px";          left_divider.style.left = (md.left_dividerLeft  + delta.x - 150) + "px";          dbase_area.style.left = (md.dbase_areaLeft + delta.x - 160) + "px";          dbase_area.style.Width = (md.dbase_areaWidth - delta.x) + "px";      }  }    document.onmouseup = (xx) => {      document.onmousemove = document.onmouseup = null; // releases the mouse      alert(dbase_area.style.Width);  }       }         dragElement( document.getElementById("left_divider"), "H" );  

https://stackoverflow.com/questions/66147803/js-sliding-divider February 11, 2021 at 10:05AM