Oscillate values of image filter in HTML

Question

I'm trying to change the saturate filter value from 1 to 5 and back to 1. I'm guessing the implementation of a variable in the getElementById is completely wrong. What's the problem?

var up = true;
var value = 1;
var increment = 1;
var ceiling = 5;

function PerformCalc() {
  if (up == true && value <= ceiling) {
    value += increment

    if (value == ceiling) {
      up = false;
    }
  } else {
    up = false
    value -= increment;

    if (value == 1) {
      up = true;
    }
  }

  function changesaturation(value) {
    document.getElementById("s1").style.webkitFilter = "saturate(" value")";
  }

}

setInterval(PerformCalc, 100);

<img src="image.jpg" id="s1" width="100%" height="1200px">

Answer 1

The nested function "changesaturation" doesn't seem necessary.
Also, string concatenation in JavaScript can be achieved with the Addition (+) operator.
Other than that, your code seems to work.

var up = true;
var value = 1;
var increment = 1;
var ceiling = 5;

function PerformCalc() {

  if (up == true && value <= ceiling) {
    value += increment

    if (value == ceiling) {
      up = false;
    }
  } else {
    up = false
    value -= increment;

    if (value == 1) {
      up = true;
    }
  }

  document.getElementById("s1").style.webkitFilter = "saturate(" + value + ")";

}

setInterval(PerformCalc, 100);

#s1 {
  width:250px;
}

<img src="https://i.picsum.photos/id/1069/536/354.jpg?hmac=ywdE7hQ_NM4wnxJshRkXBsy-MHlGRylyqlb51WToAQA" id="s1">

As Temani Afif mentioned, the effect can also be achieved with CSS animation.
Here's an example:

@-webkit-keyframes pulseSaturate {
  0% {
    -webkit-filter: saturate(1);
  }
  50% {
    -webkit-filter: saturate(5);
  }
  100% {
    -webkit-filter: saturate(1);
  }
}

@keyframes pulseSaturate {
  0% {
    filter: saturate(1);
  }
  50% {
    filter: saturate(5);
  }
  100% {
    filter: saturate(1);
  }
}

#s1 {
  width: 250px;
  -webkit-animation: pulseSaturate 800ms steps(4, end) infinite;
  animation: pulseSaturate 800ms steps(4, end) infinite;
}

<img src="https://i.picsum.photos/id/1069/536/354.jpg?hmac=ywdE7hQ_NM4wnxJshRkXBsy-MHlGRylyqlb51WToAQA" id="s1">

According to shouldiprefix, the "-webkit" vendor prefix is recommended at the time of this post.