Can't change clip-path property on an element-CodePudding

So I have a button with a box shadow, and when I click on it, I want to hide one side of the box shadow. When I change the initial CSS, everything works fine and the box shadow can be changed, but when I use javascript, none of the changes I make to the box shadow work.

HTML:

<button class = "ShowWeather" id = "ShowWeather" onclick = "ShowWeather()"></button>

javascript:

function ShowWeather(){
  const Forecast = Get("Forecast"); //get just gets an element by id
  const Button = Get("ShowWeather");
  const slider = Get('forecast_slider');

  if(slider.style.height == "0px"){
    slider.style.border = "none";
    slider.style.height = `${Forecast.getBoundingClientRect().height}px`;
    Button.style.borderRadius = "0vw 0vw 0vw 0vw";
    Button.style.borderBottom = "none";

    Button.style.clipPath = "inset(-1vh -1vh 0vh -1vh);"; //THIS IS THE PROBLEMATIC LINE

  } 
  else{
    slider.style.height = "0px";
    Button.style.clipPath = "inset(-1vh -1vh -1vh -1vh);"; //another problematic line
    setTimeout(closeWeather, 300);
  }
}

CSS:

.ShowWeather{
  width: 16.15vw;
  background: white;
  border-top: none;
  padding-top: 1vh;
  position: relative;
  bottom: 0.8vh;
  border-radius: 0vw 0vw 1vw 1vw;
  border: none;
  box-shadow: 0vh 0.5vh 1vh gray;
  clip-path: inset(-1vh -1vh 0vh -1vh);;
}

Everything besides the two problematic lines work perfectly, only changing the clip-path does not work. I probably made some tiny mistake but I have been trying to debug this 1 line of code for multiple hours aaaAAAA

CodePudding user response：

you can try to remove the semicolon at the end:

 Button.style.clipPath = "inset(-1vh -1vh -1vh -1vh)";