my function is triggering automaticly even though the condition is false

Question

i have a dragable object that is suppesed to trigger a function when dragged far enough to a side. it is suppossed to trigger a different function depending on which side the object is dragged towards. i am able to make it work at one side however if i do this it will also automaticly trigger at a different value i have not set.

the move function triggers when the mouse is held down on a specific object and it works perfectly. however if i add just about any kind of "<"-condition the code gets messed up. the code below is supposed to remove the EventListener when when the object is dragged under the 400px mark, however it will also automaticly trigger when ever it is dragged to the right, always at 1000px. i hope you can help and thanks in advance.

function move() {
    if (m.style.left < '400px') {
    m.style.left = event.clientX + 'px';
    LMenu.style.width = event.clientX + 'px';
    } else {
        window.removeEventListener('mousemove', move, true);
    }
}

Answer 1

This is because javascript is comparing two strings here, and not two integers.

('100px' < '400px') \\true
('1000px' < '400px') \\true
('500px' < '400px') \\false
('50px' < '400px') \\false

Try converting these numbers to ints first with javascripts parseInt(String) function, then comparing them.