Javascript - what is the error in JS code? The style property of the card element is not assigned because the value type of card is undefined

Gor
August 10, 2023
254 views
2 votes
3 Answers

const card = document.querySelectorAll('.process__card');

card.forEach((cardList) => {
  cardList.addEventListener('mouseover', animationBackround);
  cardList.addEventListener('mouseout', animationBackround);
})

function animationBackround(event) {
  const eventType = event.type;
  const index = Array.from(card).indexOf(event.target);

  if (eventType === 'mouseover') {
    let color1 = getRandomColor();
    let color2 = getRandomColor();
    card[index].style.backgroundColor = `linear-gradient(45deg, ${color1}, ${color2})`
  }

  if (eventType === 'mouseout') {
    card[index].style.backgroundColor = 'none';
  }

}

function getRandomColor() {
  const letters = '0123456ABCDEF';
  let color = "#";
  for (let i = 0; i < 6; i++) {
    color += letters[Math.floor(Math.random() * 16)];
  }

  return color;
}

.process {
  padding-top: 140px;
  &__wrapper {
    display: flex;
    margin: 0 auto;
    flex-direction: column;
    gap: 30px;
    width: 1234px;
  }
  &__card {
    display: flex;
    flex-direction: column;
    align-items: center;
    background-color: #F3F3F3;
    height: 159px;
    border-radius: 45px;
    border: 1px solid #191A23;
    box-shadow: 0 5px 0 0 #191A23;
    &_active {
      height: 279px;
      background-color: #B9FF66;
    }
  }
  &__content {
    display: flex;
    padding-top: 41px;
    justify-content: space-between;
    align-items: center;
    width: 1117px;
  }
  &__lable {
    display: flex;
    align-items: center;
    font-size: 60px;
    font-weight: 500;
    color: #000;
    span {
      padding-left: 25px;
      ;
      font-size: 30px;
      font-weight: 500;
      color: #000;
    }
  }
  &__plus {
    display: flex;
    position: relative;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    width: 58px;
    height: 58px;
    background-color: #F3F3F3;
    border-radius: 100%;
    border: 1px solid #191A23;
    cursor: pointer;
    &:after {
      content: '';
      display: block;
      position: absolute;
      width: 25px;
      height: 5px;
      background-color: #000;
    }
    &:before {
      content: '';
      display: block;
      position: absolute;
      width: 5px;
      height: 25px;
      background-color: #000;
    }
    &_active {
      &:before {
        content: '';
        display: block;
        position: absolute;
        width: 5px;
        height: 25px;
        background-color: #000;
        transform: rotate(90deg);
        transition: transform 0.3s ease-in-out;
      }
    }
    &:not(:active) {
      &:before {
        transition: transform 0.3s ease-in-out;
      }
    }
    &:hover {
      background-color: #B9FF66;
      transition: 0.7s all;
    }
  }
  &__subcontent {
    display: flex;
    flex-direction: column;
    width: 1117px;
    hr {
      width: 1114px;
      background-color: #000;
      height: 1px;
      border: none;
    }
    &_hidden {
      display: none;
    }
    &_active {
      display: block;
      transition: transform 0.3s ease-in-out;
    }
  }
  &__descrp {
    padding: 30px 0 41px 0;
    font-size: 18px;
    font-weight: 400;
    color: #000;
  }
}

<div class="process__card">
  <div class="process__content">
    <div class="process__lable">01<span>Consultation</span>
    </div>
    <div class="process__plus"></div>
  </div>
  <div class="process__subcontent process__subcontent_hidden">
    <hr>
    <div class="process__descrp">During the initial consultation, we will discuss your business goals and objectives, target audience, and current marketing efforts. This will allow us to understand your needs and tailor our services to best fit your requirements.</div>
  </div>

I believe that the problem lies in the line with the code:

const index = Array.from(card).indexOf(event.target);

Perhaps the Array.from() array method is not appropriate here..

I did a check and the card elements that come into the array have a negative index (index = -1) when I move the mouse away from the element

Tags: javascript

Answers

You already have the target node from event.target. So just save that to a local variable in your event handler function and use that directly to update the style.

const card = document.querySelectorAll('.process__card');
const cardArray = Array.from(card)


card.forEach((cardList) => {
  cardList.addEventListener('mouseover', animationBackround);
  cardList.addEventListener('mouseout', animationBackround);
})

function animationBackround(event) {
  const eventType = event.type;
  const target = event.target

  if (eventType === 'mouseover') {
    let color1 = getRandomColor();
    let color2 = getRandomColor();
    target.style.backgroundColor = `linear-gradient(45deg, ${color1}, ${color2})`
  }

  if (eventType === 'mouseout') {
    target.style.backgroundColor = 'none';
  }

}

function getRandomColor() {
  const letters = '0123456ABCDEF';
  let color = "#";
  for (let i = 0; i < 6; i++) {
    color += letters[Math.floor(Math.random() * 16)];
  }

  return color;
}

<div class="process__card">
  <div class="process__content">
    <div class="process__lable">01<span>Consultation</span>
    </div>
    <div class="process__plus"></div>
  </div>
  <div class="process__subcontent process__subcontent_hidden">
    <hr>
    <div class="process__descrp">During the initial consultation, we will discuss your business goals and objectives, target audience, and current marketing efforts. This will allow us to understand your needs and tailor our services to best fit your requirements.</div>
  </div>

- milennenkov
- August 10, 2023 at 7:50 am
- 0 votes
0
Try to console.log(index) inside the animationBackground. I would assume it will be -1 because the event target is one of the inner elements, not the parent .process__card.

You can use event.currentTarget as outlined in the MDN Docs

Login or Signup to reply.

Delegate and simplify

You also have two typos.

the color array is missing digits
linear gradient is on background, not backgroundColor

const getRandomColor = () => {
  const letters = '01234567890ABCDEF';
  let color = "#";
  for (let i = 0; i < 6; i++) {
    color += letters[Math.floor(Math.random() * 16)];
  }
  return color;
};

const animationBackround = (event) => {
  const tgt = event.target.closest('.process__card');
  if (!tgt) return;
  const eventType = event.type;
  if (eventType === 'mouseover') {
    let color1 = getRandomColor();
    let color2 = getRandomColor();
    console.log(color1)
    tgt.style.background = `linear-gradient(45deg, ${color1}, ${color2})`
  }
  if (eventType === 'mouseout') {
    tgt.style.background = 'none';
  }
};

const cardContainer = document.getElementById('cardContainer');
cardContainer.addEventListener('mouseover', animationBackround);
cardContainer.addEventListener('mouseout', animationBackround);

.process {
     padding-top: 140px;
}
 .process__wrapper {
     display: flex;
     margin: 0 auto;
     flex-direction: column;
     gap: 30px;
     width: 1234px;
}
 .process__card {
     display: flex;
     flex-direction: column;
     align-items: center;
     background-color: #f3f3f3;
     height: 159px;
     border-radius: 45px;
     border: 1px solid #191a23;
     box-shadow: 0 5px 0 0 #191a23;
}
 .process__card_active {
     height: 279px;
     background-color: #b9ff66;
}
 .process__content {
     display: flex;
     padding-top: 41px;
     justify-content: space-between;
     align-items: center;
     width: 1117px;
}
 .process__lable {
     display: flex;
     align-items: center;
     font-size: 60px;
     font-weight: 500;
     color: #000;
}
 .process__lable span {
     padding-left: 25px;
     font-size: 30px;
     font-weight: 500;
     color: #000;
}
 .process__plus {
     display: flex;
     position: relative;
     flex-wrap: wrap;
     align-items: center;
     justify-content: center;
     width: 58px;
     height: 58px;
     background-color: #f3f3f3;
     border-radius: 100%;
     border: 1px solid #191a23;
     cursor: pointer;
}
 .process__plus:after {
     content: '';
     display: block;
     position: absolute;
     width: 25px;
     height: 5px;
     background-color: #000;
}
 .process__plus:before {
     content: '';
     display: block;
     position: absolute;
     width: 5px;
     height: 25px;
     background-color: #000;
}
 .process__plus_active:before {
     content: '';
     display: block;
     position: absolute;
     width: 5px;
     height: 25px;
     background-color: #000;
     transform: rotate(90deg);
     transition: transform 0.3s ease-in-out;
}
 .process__plus:not(:active):before {
     transition: transform 0.3s ease-in-out;
}
 .process__plus:hover {
     background-color: #b9ff66;
     transition: 0.7s all;
}
 .process__subcontent {
     display: flex;
     flex-direction: column;
     width: 1117px;
}
 .process__subcontent hr {
     width: 1114px;
     background-color: #000;
     height: 1px;
     border: none;
}
 .process__subcontent_hidden {
     display: none;
}
 .process__subcontent_active {
     display: block;
     transition: transform 0.3s ease-in-out;
}
 .process__descrp {
     padding: 30px 0 41px 0;
     font-size: 18px;
     font-weight: 400;
     color: #000;
}

<div id="cardContainer">
  <div class="process__card">
    <div class="process__content">
      <div class="process__lable">01<span>Consultation</span>
      </div>
      <div class="process__plus"></div>
    </div>
    <div class="process__subcontent process__subcontent_hidden">
      <hr>
      <div class="process__descrp">During the initial consultation, we will discuss your business goals and objectives, target audience, and current marketing efforts. This will allow us to understand your needs and tailor our services to best fit your requirements.</div>
    </div>
  </div>
  <div class="process__card">
    <div class="process__content">
      <div class="process__lable">01<span>Consultation</span>
      </div>
      <div class="process__plus"></div>
    </div>
    <div class="process__subcontent process__subcontent_hidden">
      <hr>
      <div class="process__descrp">During the initial consultation, we will discuss your business goals and objectives, target audience, and current marketing efforts. This will allow us to understand your needs and tailor our services to best fit your requirements.</div>
    </div>
  </div>
</div>

Please signup or login to give your own answer.

Click here to cancel reply.

Javascript – what is the error in JS code? The style property of the card element is not assigned because the value type of card is undefined

Answers