Getting a random variable blur in my css

Question

I want the result of the math function into my css file, that the kind of blur is variable. But it doesn't work and I don't know how, because there are no errors. The variable number is between 1 and 5.

This is the Javascript code I'm using:

var minNumber = 1;
var maxNumber = 5;
var result;

var randomNumber = randomNumberFromRange(minNumber, maxNumber);

function randomNumberFromRange(min, max) {
    result = Math.floor(Math.random() * (max - min + 1) + min);
    return;
}


document.getElementById("test").style.filter = blur(result + "px");

Answer 1

Set that style as a string:

document.getElementById("test").style.filter = "blur(" + result + "px)";

var minNumber = 1;
var maxNumber = 5;
var result;

var randomNumber = randomNumberFromRange(minNumber, maxNumber);

function randomNumberFromRange(min, max) {
  result = Math.floor(Math.random() * (max - min + 1) + min);
}

document.getElementById("test").style.filter = "blur(" + result + "px)";

#test {
  position: absolute left: 10px;
  top: 10px;
  background-color: lightgreen;
  width: 200px;
  height: 200px;
  z-index: 9999;
  opacity: .9;
}

#test2 {
  position: absolute;
  left: 30px;
  top: 40px;
  background-color: black;
  width: 100px;
  height: 100px;
}

<div id="test">
</div>
<div id="test2"></div>