0

I am writing code to add Event Listeners to all of my images, so that when hovered over, a label will show. The image and its accompanying label are both in the same div, so I'm trying to select all of the pictures first. Then, for each picture, I get the first child of its parent element (the picture's older sibling, the label). Then, I attach an event listener to the picture, with a function passing in the label element, that changes the display property of the label from 'none' to 'inline block'.

My code doesn't throw any errors, but when it runs, it logs 'el: ' without anything after that. What am I doing wrong?

Thank you! 

function displayLabel(el) {
  console.log("el: " + el)
  el.style.display = 'inline block'
}

var autProPics = document.getElementsByClassName("authorprofilepic");
console.log(autProPics)

for (var i = 0; i < autProPics.length; i++) {
  var pel = autProPics[i].parentElement
  var el = pel.firstElementChild
  autProPics[i].addEventListener('mouseenter', function (){
    displayLabel(el)
})
}
.authorprofilepic {
  display: block !important;
  width: 4em !important;
  margin: auto;
  margin-top: .5em;
}

body {
  background-color: rgb(221,221,221);
}

.authorprofile {
  padding-top: 1em;
  display: inline-block;
  width: 5em;
}

.authorprofilelabel {
  display: none !important;
  margin: auto !important;
  max-width: 12em !important;
}
<DOCTYPE html>
<html>
<head>
<link href="https://cdn.jsdelivr.net/npm/semantic-ui@2.2.13/dist/semantic.min.css" rel="stylesheet"/>
</head>
<body>
<div class="authorprofile">
<a class="ui basic label authorprofilelabel">Ben Gubler</a>
  <a href="#" class="ui image authorprofilepic inline circular">
    <img src="https://semantic-ui.com/images/wireframe/square-image.png">
  </a>
  </div>
<div class="authorprofile">
<a class="ui basic label authorprofilelabel">Ben Gubler</a>
  <a href="#" class="ui image authorprofilepic inline circular">
    <img src="https://semantic-ui.com/images/wireframe/square-image.png">
  </a>
  </div>
<div class="authorprofile">
<a class="ui basic label authorprofilelabel">Ben Gubler</a>
  <a href="#" class="ui image authorprofilepic inline circular">
    <img src="https://semantic-ui.com/images/wireframe/square-image.png">
  </a>
  </div>
<div class="authorprofile">
<a class="ui basic label authorprofilelabel">Ben Gubler</a>
  <a href="#" class="ui image authorprofilepic inline circular">
    <img src="https://semantic-ui.com/images/wireframe/square-image.png">
  </a>
  </div>
<i class="ui plus icon link huge"></i>
</body>
</html>
Ben Gubler
  • 1,393
  • 3
  • 18
  • 32
  • 1
    read about closures - by the time any of those events happen, `el` has the value of the LAST `el` in the loop - it's the same `el` in all the handlers – Jaromanda X Jan 19 '18 at 02:46
  • Check out calling forEach in [youmightnotneedjquery](http://youmightnotneedjquery.com/#each). It should give you a good idea on adding an eventListener for each of the nodes in your array of elements. – Levidps Jan 19 '18 at 02:55
  • There are multiple problems here, it's not just an issue with closure. The way OP handled showing of the element is wrong too. – Yangshun Tay Jan 19 '18 at 03:03
  • There are a lot of problem not just javascript. First, it is `inline-block`. Second, don't use `!important` , it make you can't override your display, try add more selector to `.authorprofilelabel` like `.authorprofile .label.authorprofilelabel` so it has more point than other and the last problem is closure. – DarknessZX Jan 19 '18 at 03:14
  • @YangshunTay what would you reccomend doing instead? – Ben Gubler Jan 20 '18 at 00:05
  • @JaromandaX or anyone else, what would you do in my situation? I tried wrapping it in an anonymous function, but it still doesn't work. I looked at the duplicate, and its duplicate, but I still can't figure out how to do it. Thanks! – Ben Gubler Jan 20 '18 at 00:07
  • I can't answer because this question is closed. Maybe you can post another time (without the offending portion that caused it to be marked as a duplicate) and tag me, I'll answer there. – Yangshun Tay Jan 20 '18 at 04:32

1 Answers1

0

I am not sure about it, but I don't see

  • script tag anywhere in your html file. May be you should link your **Javascript ** file with **html ** code and,

  • after that add method onhover under img or label tag as per your requirement.

**As I am new to this, Pardon, If I am wrong. **

jatin khattar
  • 46
  • 2