Affecting objects in JavaScript for loops

Question

Can't seem to find much help about this anywhere, so i thought that I would try here.

I'm trying to make a simple for loop where when I hover over an html card, it hides some of the text in the card. The card has a simple first and last name, and I want to hide just the last name. I am able to make the whole card disappear by using the "this" object in the for loop, but I don't understand how to just make the text disappear. Any help would be appreciated as I'm still learning a lot about JS as I go.

Thanks!

let card = document.querySelectorAll(".card");

for (i = 0; i < card.length; i++) {
  card[i].addEventListener("mouseover", function() {
    this.classList.toggle("hide");
  });
}

for (i = 0; i < card.length; i++) {
  card[i].addEventListener("mouseout", function() {
    this.classList.toggle("hide");
  });
}

body {
  margin: 0;
}

.card {
  background-color: grey;
  border-radius: 4px;
  width: 100px;
  height: 100px;
  border: 1px black solid;
  display: inline-block;
  margin: 10px;
}

.hide {
  visibility: hidden;
}

<!DOCTYPE html>
<html>

<head>
  <link rel="stylesheet" type="text/css" href="card.css">
  <title>test</title>
</head>

<body>
  <div class="card">
    <span class="first">first name</span>
    <span class="last">last name</span>
  </div>
  <div class="card">
    <span class="first">first name</span>
    <span class="last">last name</span>
  </div>

  <script type="text/javascript" src="card.js"></script>
</body>

</html>

Better to use mouseenter instead of mouseover.

Barmar
– Barmar

2020-03-15 21:12:00 +00:00
Commented Mar 15, 2020 at 21:12 — Barmar
– Barmar, Commented Mar 15, 2020 at 21:12

Scott Marcus · Accepted Answer · 2020-03-15 21:18:44Z

1

this will represent the entire card as you've found. From there, you can use .querySelector() to locate the last name element within the card and operate on that.

let card = document.querySelectorAll(".card");

for (i = 0; i < card.length; i++) {
    card[i].addEventListener("mouseover", function() {
        this.querySelector(".last").classList.toggle("hide");
    });
}

for (i = 0; i < card.length; i++) {
    card[i].addEventListener("mouseout", function() {
        this.querySelector(".last").classList.toggle("hide");
    });
}

body {
    margin: 0;
}

.card {
    background-color: grey;
    border-radius: 4px;
    width: 100px;
    height: 100px;
    border: 1px black solid;
    display: inline-block;
    margin: 10px;
}

.hide {
    visibility: hidden;
}

<!DOCTYPE html>
<html>
<head>
    <link rel="stylesheet" type="text/css" href="card.css">
    <title>test</title>
</head>
<body>
    <div class="card">
        <span class="first">first name</span>
        <span class="last">last name</span>
    </div>
    <div class="card">
        <span class="first">first name</span>
        <span class="last">last name</span>
    </div>

    <script type="text/javascript" src="card.js"></script>
</body>
</html>

But this code can be simplified greatly as it can be done with just CSS and no JavaScript at all:

body {
    margin: 0;
}

.card {
    background-color: grey;
    border-radius: 4px;
    width: 100px;
    height: 100px;
    border: 1px black solid;
    display: inline-block;
    margin: 10px;
}

/* When a card is hovered, its "last" child element hidden */
.card:hover > .last {
    visibility: hidden;
}

<!DOCTYPE html>
<html>
<head>
    <link rel="stylesheet" type="text/css" href="card.css">
    <title>test</title>
</head>
<body>
    <div class="card">
        <span class="first">first name</span>
        <span class="last">last name</span>
    </div>
    <div class="card">
        <span class="first">first name</span>
        <span class="last">last name</span>
    </div>

    <script type="text/javascript" src="card.js"></script>
</body>
</html>

edited Mar 15, 2020 at 21:18

answered Mar 15, 2020 at 21:10

Scott Marcus

66k6 gold badges54 silver badges81 bronze badges

Sign up to request clarification or add additional context in comments.

3 Comments

Grant Over a year ago

Thank you this is super helpful. Never realized that I could use a ".querySelector()" after a "this" object. Didn't think to use CSS that way too. Super super helpful. If I may ask, is there any real benefit to using JS if it can just be done with css?

Scott Marcus Over a year ago

@Grant You're welcome. No, there is no benefit to JS when you can do it with CSS.

Scott Marcus Over a year ago

@Grant Also, you can call any DOM method on any DOM object -- it doesn't matter what the variable name is, only the object type.

blex · Accepted Answer · 2020-03-15 21:16:08Z

0

Alternatively, you can use :hover in CSS:

.card {
  background-color: grey;
  border-radius: 4px;
  width: 100px;
  height: 100px;
  border: 1px black solid;
  display: inline-block;
  margin: 10px;
}

.card:hover .last {
  visibility: hidden;
}

<div class="card">
  <span class="first">first name</span>
  <span class="last">last name</span>
</div>
<div class="card">
  <span class="first">first name</span>
  <span class="last">last name</span>
</div>

answered Mar 15, 2020 at 21:16

blex

25.7k6 gold badges48 silver badges78 bronze badges

1 Comment

Grant Over a year ago

Thank you so much! This does exactly what I needed it to do!

Collectives™ on Stack Overflow

Affecting objects in JavaScript for loops

2 Answers 2

3 Comments

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

3 Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related