change display of element with class x by clicking element with class y (JS)

Question

Using JS or Jquery (preferred JS) how can I change the display style of an element after clicking on another element (both elements identified by their respective classes). The below doesnt seem to work.

<script src="https://code.jquery.com/jquery-3.2.1.js"></script>


<i id="xyz" class="class1" >hey</i>

<div id="abc" class="class2" style="display: block;">lo</div>


<script type="text/javascript>
$(function() {
    $(".xyz").click(function() {
        console.log("element with class xyz was clicked");
        $(".abc").css('display': 'none');

    });
});
</script>

the console doesnt even log anything

[This question](http://stackoverflow.com/questions/2031491/whats-the-difference-between-class-and-id-in-jquery) might help you find your answer. — Jo., Apr 04 '17 at 21:50
You are using $('.xyz) while xyz is an id you should use $('#xyz) or $('.class1') same for abc — tyehia, Apr 04 '17 at 21:51

score 1 · Answer 1 · edited Apr 04 '17 at 22:18

1

It looks like you are trying to reference your IDs by using CLASS syntax in your jQuery selector.

Instead of using $(".xyz") use $("#xyz"). Same for your $(".abc") selector.

Hope that helps!

edited Apr 04 '17 at 22:18

Liam Gray

1,089
9
16

answered Apr 04 '17 at 22:00

muddy beard

26
3

score 0 · Answer 2 · answered Apr 04 '17 at 21:57

You should use document.querySelector(cssSelector) for getting elements by class or id or document.getElementById to get elements by id only. Here is VanilaJS solution:

var firstElem = document.querySelector(".class1");

firstElem.addEventListener("click", function(event){
  var secondElem = document.querySelector(".class2");
  secondElem.style.display = "none";
})

<i id="xyz" class="class1" >hey</i>

<div id="abc" class="class2">lo</div>

change display of element with class x by clicking element with class y (JS)

2 Answers2