I want to make a div transparent. This code was working in javascirpt but now I converted it to JQuery for learning purpose but I get:

Error : Uncaught TypeError: Cannot read property 'opacity' of undefined

$(document).ready(function(){
   $("#addtask").click( function() {
      if ($("#taskinput").style.opacity == "100") {
        $("#taskinput").style.opacity = "0";
      }
      else if ($("#taskinput").style.opacity == "0") {
        $("#taskinput").style.opacity = "100";
      }
    });
  });

#taskinput {
  background-color: red;
  height: 200px;
  width: 200px;
}

<script src=".1.1/jquery.min.js"></script>
<button id="addtask">
Click me
</button>

<div id="taskinput">

</div>

I want to make a div transparent. This code was working in javascirpt but now I converted it to JQuery for learning purpose but I get:

Error : Uncaught TypeError: Cannot read property 'opacity' of undefined

$(document).ready(function(){
   $("#addtask").click( function() {
      if ($("#taskinput").style.opacity == "100") {
        $("#taskinput").style.opacity = "0";
      }
      else if ($("#taskinput").style.opacity == "0") {
        $("#taskinput").style.opacity = "100";
      }
    });
  });

#taskinput {
  background-color: red;
  height: 200px;
  width: 200px;
}

<script src="https://ajax.googleapis./ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<button id="addtask">
Click me
</button>

<div id="taskinput">

</div>

I am not quite sure what is wrong.

• javascript
• jquery

Share Improve this question Follow edited Jan 4, 2018 at 16:33 Zakaria Acharki 67.5k1515 gold badges7878 silver badges106106 bronze badges asked Jan 4, 2018 at 15:59 Tom ThomsonTom Thomson 44211 gold badge55 silver badges1717 bronze badges 3

• 6 You are executing DOM methods on jQuery objects – mplungjan Commented Jan 4, 2018 at 16:00
• 1 Well, using DOM properties on jQuery objects. – T.J. Crowder Commented Jan 4, 2018 at 16:02
• Sorry for wasting your time facepalm – Tom Thomson Commented Jan 4, 2018 at 16:05

Add a ment  | 

5 Answers 5

Sorted by: Reset to default 2

Try this

$(document).ready(function(){
   $("#addtask").click( function() {
      var opacity = $("#taskinput").css("opacity");
      console.log("opacity", opacity);
      if (opacity > 0) {
        $("#taskinput").css("opacity", 0);
      }
      else if (opacity == 0) {
        $("#taskinput").css("opacity", 1);
      }
    });
  });

#taskinput {
  background-color: red;
  height: 200px;
  width: 200px;
}

<script src="https://ajax.googleapis./ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<button id="addtask">
Click me
</button>

<div id="taskinput">

</div>

You need to use jQuery methods on your jQuery objects instead of the DOM properties you were using before.

Instead of:

$("#taskinput").style.opacity = "0";

Use:

$("#taskinput").css('opacity', 0);

You're doing a load of things incorrectly here. Most importantly, you can acplish what you want with just $("#taskinput").toggle();.

What you had gotten wrong was:

• You were trying to apply native JavaScript methods on jQuery objects when you were doing $("#taskinput").style.opacity. You can use this as long as you dereference the object since each jQuery object also masquerades as an array. You can do that via $("#taskinput")[0] or $("#taskinput").get(0)
• The opacity property values range from 0 to 1, not 0 to 100.
• You were paring numbers and strings.

So again, just use .toggle() to do what you wanted to do:

$(document).ready(function() {
  $("#addtask").click(function() {
      $("#taskinput").toggle();
  });
});

#taskinput {
  background-color: red;
  height: 200px;
  width: 200px;
}

<script src="https://ajax.googleapis./ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<button id="addtask">
Click me
</button>

<div id="taskinput">

</div>

You are modifying DOM properties on jQuery objects and opacity goes from 0 to 1, not from 1 to 100

If you just want to show or hide, use .toggle

$("#taskinput").toggle();

To use opacity, try

$(document).ready(function() {
  $("#addtask").click(function() {
    var opc = $("#taskinput").css("opacity");
    $("#taskinput").css("opacity", opc < 1? 1: 0.5);
  });
});

#taskinput {
  background-color: red;
  height: 200px;
  width: 200px;
  opacity:0.5;
}

<script src="https://ajax.googleapis./ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<button id="addtask">
Click me
</button>

<div id="taskinput">
  Hello
</div>

"Uncaught TypeError: Cannot read property 'opacity' of undefined"

The error message shows since you're trying to call the style that is an attribute of DOM object on jQuery object, you could always return DOM object instead using [0] like :

$("#taskinput")[0].style.opacity = "0";

But since you're using jQuery it will be better to use the jQuery method .css() instead :

$("#taskinput").css("opacity", 0);

NOTE : opacity should be between 0 and 1, 100 isn't a valid value of this property.

$(document).ready(function() {
  $("#addtask").click(function() {
    var input = $("#taskinput");
    var opacity = input.css('opacity');

    if (opacity == 1) {
      input.css('opacity', 0);
    } else if (opacity == 0) {
      input.css('opacity', 1);
    }
  });
});

#taskinput {
  background-color: red;
  height: 200px;
  width: 200px;
}

<script src="https://ajax.googleapis./ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<button id="addtask">
Click me
</button>
<div id="taskinput"></div>