Can't access the style using DOM

Question

For some reason, the error keeps being thrown at me whenever I hover over the selected element. It seems like every time I use the .style property, it gives me this error. The problem is how I'm accessing the CSS element using .style. Is there another way of doing it?

Uncaught TypeError: Cannot read property 'style' of undefined

    var image = document.getElementsByClassName("image");
var move = document.getElementsByClassName("link");
var description = document.getElementsByClassName("description");
for(var i = 0; i < move.length; i++){
    move[i].addEventListener("click", function(){

             if (move[i].style.marginLeft === "500px") {
            move[i].style.marginLeft = "0";
        } else {
            move[i].style.marginLeft = "500px";
        }

    })
};


for(var i = 0; i<description.length;i++){
image[i].addEventListener("mouseover", function(){
    description[i].style.visibility = visible;
   description[i].style.opacity = 0;
   var last = +new Date();
   var tick = function(){
       despcription[i].style.opacity = +despcription[i].style.opacity + (new Date() - last)/700;
       last = +new Date();

       if (+despcription[i].style.opacity < 1) {
      (window.requestAnimationFrame && requestAnimationFrame(tick)) || setTimeout(tick, 16);
    }
  };

  tick();
   });
}

flyer · Answer 1 · 2017-08-04T19:28:47.350

You have a typo: despcription

       despcription[i].style.opacity = +despcription[i].style.opacity + (new Date() - last)/700;
       last = +new Date();

       if (+despcription[i].style.opacity < 1) {

And I don't know if you are trying to do more than this, but are you attempting to fade in an image on hover? If so, then setting this in CSS works well:

EDIT: I updated the sample to show a title under the image when you hover over the image. The key is the ~ (sibling) selector right here:

.image:hover~.image-title {
      opacity: 1;
    }

It says when the user hovers over the image class, then select the sibling element with class of .image-title and set its opacity to 1.

.image {
  background-image: url('https://amazingslider.com/wp-content/uploads/2012/12/dandelion.jpg');
  height: 300px;
  width: 300px;
  background-size: cover;
  background-position: center;
}

.image:hover~.image-title {
  opacity: 1;
}

.image-title {
  opacity: 0;
  transition: opacity 1s ease;
  display: inline-block;
  width: 300px;
  text-align: center;
  margin: 0;
}

<h1>Hover Over Image</h1>
<div class="image"></div>
<h3 class="image-title">Image Title</h3>

Thanks for catching that for me however, that wasn't the issue I was having. I believe I'm not accessing the css element properly. Every functionality I have above won't work simply because I'm not changing the CSS property properly. — John A, Aug 04 '17 at 19:16
I am trying to hover over an image and then have text appear next to it. So technically, wouldn't I have to just javascript to first access the image then add the function to make the text next to it visible? That's the general idea. — John A, Aug 04 '17 at 19:23

Can't access the style using DOM

1 Answers1