Trying to figure out how to get fade to work

JavaScript
182

This function isn’t passing the wrapper to players

function findPlayers() {
    const allCovers = document.querySelectorAll(".cover");
    const allWrappers = document.querySelectorAll(".wrap");
    allCovers.forEach(function addToPlayers(cover, index) {
      players.push({
        "cover": cover,
        "wrapper": allWrappers[index]
      });
    });
  }

the querySelectorAll(“.wrap”) is only finding one. Whereas, querySelectorAll(“.cover”) is finding two. const allCovers = document.querySelectorAll(“.cover”); const allWrappers = document.querySelectorAll(“.wrap”);

183

OK, keep working the problem. Keep tracing through your code. Find where your code is doing what you expect and keep working forward until you find where it isn’t doing what you expect.

This forum isn’t here to fix your code. But we are willing to help you learn how to fix it yourself.

184

I don’t know how to fix what may be broken in the code.

It may be that this needs to be written differently, I am not sure.

var playButtons = document.querySelectorAll('button.cover');

for (var button of playButtons) {
  button.addEventListener('click', function() {
    var videoContainer = document.querySelector('.video');
    videoContainer.setAttribute('data-id', button.getAttribute('data-id'))
  });
}
185

If you understand what seems to be the issue here, and what needs to be fixed, maybe you might be able to guide me in the right direction of how I can fix it myself.

186

Trace through the code.

On what specific line does it stop doing what you expect? What do you expect it to do? What does it do instead?

You need to come up with a question like that instead of “it doesn’t work, tell me how to fix it”. You need something better than “it doesn’t work”.

You have to pinpoint where the issue is. This is a fundamental skill of programming.

You have gotten an insane amount of guidance here. This thread alone is more than a month old with 184 posts and covering several topics. And this is one of several threads.

If you can’t find the issue, then, once again, I would suggest that this project is beyond your abilities at the moment. I would suggest that you might want to take a step back and learn more about HTML/CSS/JS and DOM manipulation. You might also find this easier by using libraries that are available. Personally, I don’t do direct DOM manipulation because I use React.

187

This is what I know.

It’s returning undefined for the second video.

  function getWrapper(cover) {
    const index = players.findIndex(
      (player) => player.cover === cover
    );
    return players[index].wrapper;
  }

This function isn’t passing the wrapper to players

function findPlayers() {
    const allCovers = document.querySelectorAll(".cover");
    const allWrappers = document.querySelectorAll(".wrap");
    allCovers.forEach(function addToPlayers(cover, index) {
      players.push({
        "cover": cover,
        "wrapper": allWrappers[index]
      });
    });
  }

the querySelectorAll(".wrap") is only finding one. Whereas, querySelectorAll(".cover") is finding two. const allCovers = document.querySelectorAll(".cover"); const allWrappers = document.querySelectorAll(".wrap");

188

You mentioned several things there.

I’m asking one question. Where do things first go wrong? I am not going to bother worrying about everything downstream of that. If my car is out of gas, I’m going to fix that before I figure out why the car isn’t starting.

It’s returning undefined for the second video.

  function getWrapper(cover) {
    const index = players.findIndex(
      (player) => player.cover === cover
    );
    return players[index].wrapper;
  }

What is the “it” in that sentence? Part of being a developer is being able to talk clearly about code.

Are you saying that _ getWrapper_ receives the correct input but does not return the correct output? Then find out why, narrow it down:

  function getWrapper(cover) {
    console.log('getWrapper, cover', cover)
    const index = players.findIndex(
      (player) => player.cover === cover
    );
    console.log('getWrapper, index', index)
    console.log('getWrapper, players', players)
    console.log('getWrapper, players[index]', players[index])
    console.log('getWrapper, players[index].wrapper', players[index].wrapper)
    return players[index].wrapper;
  }

Find the exact point where it doesn’t do what you want. Be a detective.

2 Likes
189

I don’t know how to fix it.

190

Then, we suggest you go through the the JavaScript curriculum here as its seems you have not learned enough to be working on such a project.

2 Likes
191

Right, we’re not saying it to be harsh. We’re trying to help you. You are going to learn faster and learn better if you take a step back and get a better grasp on the fundamentals.

I, too, had a “big project” that I wanted to do when I started out. I ended up doing the same thing - I started it and ran into a bunch of difficulties. I’m finally getting it now that I’m on my third try.

If you want to build a house, first you learn how to use a saw, tape measure, hammer, t-square, etc. Then you learn framing, plumbing, electrical, finishing, etc. Then maybe you do some smaller projects: a shed, a cabin, etc. You won’t do yourself any favors by starting building two story house and learn the basics as you go.

2 Likes
192

All the advice we have given still applies and we will keep giving it. Learn JS and plain DOM manipulation better. You have been given links to help with that.

I might have mentioned this before, but it is worth repeating. Learn to debug your code better and how to use the actual debugger. Make a local version of the project and debug it.

You keep telling us what other people have told you which seems to indicate that you do not really understand the code. The chances of refactoring code you do not understand are slim to none. Refactoring code requires knowledge of how the code works. You can not (easily) change the implementation of something you do not understand.

2 Likes
193

I don’t like giving up on things.

I will keep trying.

194

Learning the basics is not giving up. Learning the basics is doing the necessary work to get the job done.

1 Like
195

Thank you to everyone for your support and guidance.

196

Don’t give up on it, postpone it until you are better equipped.

Someone may want to climb Mount Everest today, but they need to train first. That’s not giving up, that’s being realistic and doing what needs to be done to achieve their goal.

2 Likes
197

Can I get your opinions on all of these?

If you had to pick one of these, or one of your own, which way written do you like the best?

What would be the best way in your judgment?

Which would be a good configuration?

For it to be set up one way.

Maybe you might have a different way you might write it.

1)

document.querySelectorAll('button[data-id]').forEach(function(button) {
    button.addEventListener('click', function(e) {
      const videoContainer = document.querySelector('.video');
      videoContainer.setAttribute('data-id', button.getAttribute('data-id'))
    });
  });

2)

document.querySelectorAll('button[data-id]').forEach(function(button) {
  button.addEventListener('click', function (e) {
    document.querySelector('.video').dataset.id = e.target.dataset.id;
  });
});

3)

const playButtons = document.querySelectorAll('button.cover');

function buttonClick(event) {
  var videoContainer = document.querySelector('.video');
  const button = event.target.getAttribute('data-id');
  videoContainer.setAttribute('data-id', button)
}

for (const button of playButtons) {
  button.addEventListener('click', buttonClick);
}

4)

const playButtons = document.querySelectorAll('button.cover');

function buttonClick(event) {
  const videoContainer = document.querySelector('.video');
  const att = event.target.getAttribute('data-id');
  videoContainer.setAttribute('data-id', att)
}

for (let i = 0; i < playButtons.length; i++) {
  const button = playButtons[i];
  button.addEventListener('click', buttonClick);
}

5)

const playButtons = document.querySelectorAll('button.cover');

function buttonClick() {
  const videoContainer = document.querySelector('.video');
  const att = this.getAttribute('data-id');
  videoContainer.setAttribute('data-id', att)
}

for (let i = 0; i < playButtons.length; i++) {
  const button = playButtons[i];
  button.addEventListener('click', buttonClick);
}

6)

const button = document.querySelectorAll('button.cover');

button.forEach(function addToPlayers(button, cover) {
  button.addEventListener('click', function() {
    var videoContainer = document.querySelector('.video');
    videoContainer.setAttribute('data-id', button.getAttribute('data-id'))

  });
});

7)

document.querySelectorAll('button[data-id]').forEach(function(button) {
  button.addEventListener('click', function() {
    const videoContainer = document.querySelector('.video');
    videoContainer.setAttribute('data-id', button.getAttribute('data-id'))
  });
});
198

Before we can really answer these questions, you should first explain what you are trying to accomplish with these code segments.

Which code seems for readable to you?

If I am not mistaken, you only have one video container now, so do you need to find the video container every time you click on a button?

201

The code won’t work without the .video element.

document.querySelector('.video');

If I remove that line, no video will appear.

202

You did not answer my question.

203

Would that change how one of those configurations would be written?

Would this one for example be written differently then?

document.querySelectorAll('button[data-id]').forEach(function(button) {
    button.addEventListener('click', function(e) {
      const videoContainer = document.querySelector('.video');
      videoContainer.setAttribute('data-id', button.getAttribute('data-id'))
    });
  });