CODEWITHSUNDEEP
javascript
Behar
Behar

Reputation: 179

Blur Image JavaScript

I have started making a blur image so when you click the button "Blur Image", it will blur image but there are some errors showing on Console.Log and I have been trying to solve it but didn't had success.

let btn = document.querySelector('.btnbl')[0];
let img = document.querySelector('img')[0];
c = 0;

function coverImage () {
    if( c === 0) {
        btn.innerHTML = 'Blur Image';
        img.style.filter = 'blur(0)';
        c = 1;
    } else {
        btn.innerHTML = 'Unblur Image';
        img.style.filter = 'blur(24px)';
        c = 0;
    }
}
.blur{
    margin-top: 20px;
    display: flex;
    justify-content: center;
}
.blur img{
    width: 730px;
    height: 520px;
    filter: blur(0px);
}
.btnbl{
    position: absolute;
    top: 45px;
    right: 452px;
    padding: 7px;
    background-color: darkslategray;
    border-radius: 5px solid yellow;
    font-size: 20px;
    color: white;
    cursor: pointer;
    font-family: sans-serif;
}
<div class="blur">
    <img src="https://4.bp.blogspot.com/_EZ16vWYvHHg/TFBW_zN6oaI/AAAAAAAAQd4/8UxrcXLQ5js/s1600/www.idool.net-Perrito.jpg">
    <button onclick="coverImage()" class="btnbl">Blur Image</button>
</div>

Upvotes: 0

Views: 1078

Answers (3)

Dom Garcia
Dom Garcia

Reputation: 91

Just take out the indexes for the variables like so:

let btn = document.querySelector('.btnbl'); let img = document.querySelector('img');

let btn = document.querySelector('.btnbl');
let img = document.querySelector('img');
c = 0;

function coverImage () {
    if( c === 0) {
        btn.innerHTML = 'Blur Image';
        img.style.filter = 'blur(0)';
        c = 1;
    } else {
        btn.innerHTML = 'Unblur Image';
        img.style.filter = 'blur(24px)';
        c = 0;
    }
}
.blur{
  margin-top: 20px;
  display: flex;
  justify-content: center;
}
.blur img{
  width: 730px;
  height: 520px;
  filter: blur(0px);
}
.btnbl{
  position: absolute;
  top: 45px;
  right: 452px;
  padding: 7px;
  background-color: darkslategray;
  border-radius: 5px solid yellow;
  font-size: 20px;
  color: white;
  cursor: pointer;
  font-family: sans-serif;
}
         <div class="blur">
           <img src="https://4.bp.blogspot.com/_EZ16vWYvHHg/TFBW_zN6oaI/AAAAAAAAQd4/8UxrcXLQ5js/s1600/www.idool.net-Perrito.jpg">
           <button onclick="coverImage()" class="btnbl">Blur Image</button>
         </div>

Upvotes: 1

Casey Anderson
Casey Anderson

Reputation: 462

querySelector() returns only one element, so no need to reference it as an array.

Upvotes: 1

ellipsis
ellipsis

Reputation: 12152

document.querySelector returns a single element so no need to access the elements like it returns an array by using []. and make c=1 before calling the function because originally it is un-blurred

let btn = document.querySelector('.btnbl');
let img = document.querySelector('img');
c = 1;

function coverImage () {
    if( c === 0) {
        btn.innerHTML = 'Blur Image';
        img.style.filter = 'blur(0)';
        c = 1;
    } else {
        btn.innerHTML = 'Unblur Image';
        img.style.filter = 'blur(24px)';
        c = 0;
    }
}
.blur{
  margin-top: 20px;
  display: flex;
  justify-content: center;
}
.blur img{
  width: 730px;
  height: 520px;
  filter: blur(0px);
}
.btnbl{
  position: absolute;
  top: 45px;
  right: 452px;
  padding: 7px;
  background-color: darkslategray;
  border-radius: 5px solid yellow;
  font-size: 20px;
  color: white;
  cursor: pointer;
  font-family: sans-serif;
}
<div class="blur">
           <img src="https://4.bp.blogspot.com/_EZ16vWYvHHg/TFBW_zN6oaI/AAAAAAAAQd4/8UxrcXLQ5js/s1600/www.idool.net-Perrito.jpg">
           <button onclick="coverImage()" class="btnbl">Blur Image</button>
         </div>

Upvotes: 2

Related Questions