I have multiple divs and would like to apply a blur effect to all of them simultaneously. However, currently only the first div with the blur effect class is affected by the blur.
When I click the button, I want the text "hello world" to become blurred. Unfortunately, when I press the button, the text remains unchanged.
function addBlur() {
var overlay = document.getElementsByClassName("overlay");
var blurDiv = document.getElementsByClassName("blur");
if ((overlay[0].style.display === "none") && (blurDiv[0].style.display === "none")) {
overlay[0].style.display = "block";
blurDiv[0].style.display = "block";
} else {
overlay[0].style.display = "none";
blurDiv[0].style.display = "none";
}
}body {
background-color: white;
text-align: center;
color: black;
font-family: Arial, Helvetica, sans-serif;
width: 800px;
height: 600px;
}
.blur {
display: none;
position: absolute;
width: 800px;
height: 600px;
background-color: rgba(44, 44, 27, 0.527);
filter: blur(8px);
z-index: 1;
}
.text {
position: absolute;
top: 82%;
left: 25%;
right: 25%;
z-index: 1;
}
.overlay {
position: absolute;
display: none;
width: 35%;
height: 42%;
top: 28%;
left: 25%;
right: 25%;
bottom: 20%;
background-color: #ffb87d;
z-index: 2;
cursor: pointer;
}
.button {
background-color: rgb(255, 127, 80);
padding: 24px;
color: rgb(255, 255, 255);
border-radius: 15px 15px;
}
.touch {
display: block;
border: solid 4px;
position: absolute;
width: 800px;
height: 600px;
z-index: 2;
}<!DOCTYPE html>
<html>
<head>
<title>Page Title</title>
</head>
<body>
<div class="touch">
<div class="text">
<H1> Hello world! </H1>
</div>
<!-- text -->
<H3> touch </H3>
<div>
<button class='button' onclick='addBlur()'> Apply Blur </button>
</div>
<div class="overlay">
<p> Prime number </p>
</div>
<!-- overlay -->
</div>
<!-- touch -->
<div class="blur">
</div>
</body>
</html>