How can I change the backdrop filter I have set in CSS with JavaScript?

I am working to create a virtual microscope using hotkeys to operate it. The file movingImg has a switch statement that calls on functions when a certain key is pressed. So far I can move the image and the move is conveyed to the user with animated arrows.

When you first look into a microscope the image is never in focus, you almost always have to zoom in with core or fine focus. To emulate this I set the background filter of the image to blur(6px) and also change the brightness. I want to be able to increment/decrement the blur on the image with a certain key.

To move the image left, right, up, and down I was able to use this piece of code I found somewhere online document.getElementById('cellmic').style.left=parseInt(bioImage.style.left)-2 +'px'; I figure I could do the same thing with style.backdropFilter but it did not work.

It would be appreciated if I could get any direction on how to slowly increment or decrement the blur filter with a certain key. Below is what I have so far, the black lines are just for me to be able to see my layout.

/*Javascript function to move image left/right up/down, animate the move on the screen with a button animation, and to focus the image.
We ca do this using the EnentListener keydown to call to a switch statement to figure out exactly which key the user has pressed using keycodes.
Depending on which key left/right up/down the switch statment will execute the functions needed. */


var bioImage=null;
    //function to select image and buttons
    //keydown event listener will call getKeyAndMove
    //once a key has been pressed down
    function init() {
        bioImage=document.getElementById('cellmic'); 
        view=document.getElementById('grid5');
        bioImage.style.position='relative';
        bioImage.style.left='0px';
        bioImage.style.top='0px';
        document.addEventListener('keydown', getKeyAndMove);
    }

    //Switch statement to call for correct button pressed
    function getKeyAndMove(e){              
        var key_code=e.which||e.keyCode;
        switch(key_code){
            case 37: //left arrow key
                moveLeft();
                animateLeft();
                break;
            case 38: //Up arrow key
                moveUp();
                animateUp();
                break;
            case 39: //right arrow key
                moveRight();
                animateRight();
                break;
            case 40: //down arrow key
                moveDown();
                animateDown();
                break;  
            case 49: //number 1 key
                coreOut();
                break;  
            case 50: //number 2 key
                coreIn();
                break;
            case 189: //minus key
                fineOut();
                break;
            case 187: //equal or plus key
                fineIn();
                break;
            case 85: // key
                brightnessUp();
                break;
            case 68: //d key
                brightnessDown();   

        }
    }

        //Functions for left button
        //Styles the images to move in a given direction 2px
        function moveLeft() {
            bioImage.style.left=parseInt(bioImage.style.left)+2 +'px';
        }

        //In the CSS file the arrow keys are all set to paused in the animation attribute.
        //When a button is pressed on the keyboard the corresponding arrow is set to running 
        //so it's animation will happen on screen. To see the code for the animation look at 
        //for the keyframes in CSS file. 
        function animateLeft() {
            document.getElementById("left").style.WebkitAnimationPlayState = "running";
        }

        //Functions for up button
        function moveUp() {
            bioImage.style.top=parseInt(bioImage.style.top)+2 +'px';
        } 

        function animateUp() {
            document.getElementById("up").style.WebkitAnimationPlayState = "running";
        }

        //Functions for right button
        function moveRight() {
            bioImage.style.left=parseInt(bioImage.style.left)-2 +'px';
        }

        function animateRight() {
            document.getElementById("right").style.WebkitAnimationPlayState = "running";
        }

        //Functions for down button
        function moveDown() {
            bioImage.style.top=parseInt(bioImage.style.top)-2 +'px';
        }

        function animateDown() {
            document.getElementById("down").style.WebkitAnimationPlayState = "running";
        }

        //Function for 1 and 2 key
        //This styles the image's backdrop filter. In the CSS file the backdrop filter is set to blur(6px).
        //When the user presses key 1 we want the blur to decrease. When the user presses key 2 we want the blur to increase.
        function coreOut() {
            view.style.backdropFilter=parseInt(view.style.backdropFilter)+'blur('+1+'px)';
        }

        function coreIn() {
           
        }

        //Function for minus and plus key
        //This styles the image's opacity In the CSS file the opacity is set to 0.6.
        //When the user presses the minus key we want the opacity to decrease. 
        //When the user presses the plus key we want the opacity to increase.
        //Opacity can make the image completely invisible so we may need to look at other options. 
        //Or we can add some sort of try catch that doesn't allow the user to go past a certain opacity.
        function fineOut() {

        }

        function fineIn() {

        }

        function brightnessUp() {

        }

        function brightnessDown() {
            
        }




        window.onload=init;
    
*{
    box-sizing: border-box;
    padding: 0;
    margin: 0;
}

body {
    position: relative;
    display: flex;
}

img {
    position: absolute;
    object-fit: cover;
    filter: opacity(0.6);
}

/* Grid Layout */

.container {
    display: grid;
    grid-template-columns: 0.2fr 2.9fr 0.2fr;
    grid-template-rows: 0.4fr 2.7fr 0.8fr;
    grid-auto-flow: row;
    position: absolute;
    position: fixed;
    width: 100vw;
    height: 100vh;
}
  
.grid {
    border: 5px solid rgba(0, 0, 0, 0.8);
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: white;
}

#grid5 {
    backdrop-filter: blur(6px) brightness(86%);
}

/* Keyframes animation */

#up {
    animation: motionUp 0.3s alternate 0s 4 paused;
}

@keyframes motionUp {
    from {
        top: 15px;
    }

    to {
        top: 5px;
    }
}

#left {
    animation: motionLeft 0.3s alternate 0s 2 paused;
}

@keyframes motionLeft {
    from {
        left: 35px;
    }

    to {
        left: 25px;
    }
}

#right {
    animation: motionRight 0.3s alternate 0s 2 paused;
}

@keyframes motionRight {
    from {
        right: 35px;
    }

    to {
        right: 25px;
    }
}

#down {
    animation: motionDown 0.3s alternate 0s 2 paused;
}

@keyframes motionDown {
    from {
        bottom: 55px;
    }

    to {
        bottom: 45px;
    }
}

  
  
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <link rel="stylesheet" href="style.css">
</head>

<header>

</header>

<body>
    <div id="zoom">
        <img id="cellmic" src="https://i.pinimg.com/originals/03/ef/7c/03ef7cf7f7bae75563e62bb5f371c44b.jpg" height="775" width="2048" alt="">
    </div>
    
    
    <div class="container">
        <div class="grid" id="grid1"></div>
        <div class="grid" id="grid2"><img id="up" src="img/double-up.png" height="50" width="50" alt=""></div>
        <div class="grid" id="grid3"></div> 
        <div class="grid" id="grid4"><img id="left" src="img/double-left.png" height="50" width="50" alt=""></div>
        <div id="grid5"></div>
        <div class="grid" id="grid6"><img id="right" src="img/double-right.png" height="50" width="50" alt=""></div> 
        <div class="grid" id="grid7"></div>
        <div class="grid" id="grid8"><img id="down" src="img/double-down.png" height="50" width="50" alt=""></div>
        <div class="grid" id="grid9"></div>
      </div>  
    
</body>

<script src='JSfiles/jquery-3.6.0.min.js'></script>
<script src='JSfiles/focusWheel.js' type="text/javascript"></script>
<script src='JSfiles/movingImg.js' type="text/javascript"></script>

</html>

Answer

The code you have here: parseInt(view.style.backdropFilter)+'blur('+1+'px)', if we breakdown what it will get– the value at view.style.backdropFilter, which will be something like "blur(3px)", which will evaluate to NaN when parsed as an integer. You then add this to some numbers an strings, which is essentially NaN+'blur('+1+'px)', which will evaluate to "NaNblur(1px)", which obviously won’t work.

Your example involves a lot of code– not quite a minimal, reproducible example. As such, I just created a small example of how to accomplish this below. I stored the current blur level in a data attribute to avoid having to try to ascertain it from the current value each time. Then I increment it, update the dataset, and update the element.style.backdropFilter value with blur(${increasedLevel}px:

function increaseBlur() {
  const overlay = document.querySelector('.overlay');
  const currentLevel = parseInt(overlay.dataset.blurlevel, 10);
  const increasedLevel = currentLevel + 1;
  overlay.dataset.blurlevel = increasedLevel;
  overlay.style.backdropFilter = `blur(${increasedLevel}px)`;
}
.wrapper {
  position: relative;
}

.overlay {
  position: absolute;
  top: 0;
  bottom: 0;
  right: 0;
  left: 0;
}
<div class="wrapper">
  <h1>Text</h1>
  <div class="overlay" data-blurlevel="0" style="backdropFilter: 'blur(0px')"></div>
</div>
<button onclick="increaseBlur()">increase</button>

Storing in a data attribute is of course not your only option– you could also just maintain it in some singleton in memory, or, if you wanted, try to pull it out of the current style.backdropFilter value each time– but that seems like it could be flimsy/painful.

Good luck, happy coding!