Maybe I should be using data-target="" instead of data-destination="", as that is used in the example that is given?
The codepen example that I shared uses data-target="" also.
What if data-target="" is used instead of data-destination="" ?
From AI:
The data-target and data-destination are both custom data attributes in HTML, often used in conjunction with JavaScript or libraries like Bootstrap. However, data-target is a more commonly used attribute, especially in Bootstrap, while data-destination is not a standard attribute and may be used in specific cases or libraries.
The data-target attribute in Bootstrap is used to make your life easier by not needing to write a single line of JavaScript to use their pre-made JavaScript components1. The data-target attribute should contain a CSS selector that points to the HTML Element that will be changed1. For example, in a modal:
In this example, the button has data-target="#myModal", if you click on it, <div id="myModal">… will be modified (in this case faded in).
On the other hand, data-destination is not a standard attribute and its behavior would depend on the specific JavaScript code or library that is using it. It might be used similarly to data-target, to specify a particular element or location in the HTML document, but without more context, it’s hard to say exactly how it’s used. You would need to refer to the documentation or code that is using this attribute for more specific information.
Remember, any attribute with the “data-” prefix is used to store custom data that won’t be rendered in the browser. So, data-destination could be used to store any custom data as per the requirements of your web application or the library you are using.
Makes absolutely no difference (assuming you aren’t using bootstrap) as they are both made up things. You can see my code works perfectly so it is your implementation that is wrong!
(function manageButtonA() {
function resetPage() {
// Destroy the first player if it exists
if (videoPlayer.players[0]) {
videoPlayer.players[0].destroy();
}
//handleModal("buttonA");
}
function modalClickHandler() {
resetPage();
loadPlayer.add(".buttonA", {
videoId: "CHahce95B1g"
});
}
const closeModal = document.querySelector(".close");
closeModal.addEventListener("click", modalClickHandler);
}());
Then you are doing it wrong as they all have basically the same code and the only difference is the video id. You could do it in one function and supply the video based on which button was clicked. You don’t need to define the same function for multiple buttons as that is not manageable.
Look at the code I gave you. It handles all the modals from one function including opening and closing.
You need to put your video code inside my function and apply the correct video by checking the data-destination as required.
I would need multiple so that they don’t all launch at the same time.
No?
Isn’t code separation/isolation a good thing?
So it’s not all jumbled together.
Would I be able to get it to work both ways to see the difference?
function modalClickHandler() {
resetPage();
// Initialize the player when the modal is clicked
loadPlayer.add(".buttonA", {
videoId: "CHahce95B1g"
});
}
Not when you are doing exactly the same thing to multiple elements apart from one line of code.
You are trying to do too much at once as I keep saying.
This is a new layout so build it with minimum code first as per my example. Then add the videos into the reduced code and get them working first. Once that is done then you can see about implementing that with your other functions. Work on one thing at a time…
In your last example you don’t even add the click handler to the buttons so I don’t know how you expect them to open. You also add multiple event handlers to only the first ‘close’ item.
Start small and get the videos working first even if you just add them manually to start with. Then once working you can work on a plan to automate them. There’s just too much going on in your code to try and do everything all at once.
You; would need the same to open the modal and of course do it for all the different modals which is why I say that’s a bad approach. You aren’t using the data-destination targets I gave you so you don’t identify the modal.
Your players code is too complicated for me as it just jumps backwards and forwards and repeats itself. I can’t follow the logic.
var buttons = document.querySelectorAll('.playButton');
buttons.forEach(function(button) {
button.addEventListener('click', function() {
var destination = this.getAttribute('data-destination');
var targetElement = document.querySelector(destination);
// Perform your action with the targetElement here
// For example, you might want to display the element
targetElement.style.display = 'block';
});
});
function modalClickHandler() {
// Destroy the first player if it exists
if (videoPlayer.players[0]) {
videoPlayer.players[0].destroy();
}
resetPage();
loadPlayer.add(".buttonA", {
videoId: "CHahce95B1g"
});
}
