Develop Reference

Videos should appear on same page after after going back to previous page

In the code I am working on, the video is not reappearing after it is removed, why is this, and is there a way for that to be fixed or adjusted in the code so that the videos will appear after going back to a previous page?
To reproduce, click on a button to enter a container, then the blue play button, then the exit button, then enter the same button again, the video has not reappeared.
code https://jsfiddle.net/wzaknd08/
function removePlayerHandler(evt) {
const el = evt.target;
let container = el.closest(".container");
let wrappers;
if (container) { //if multiple players
wrappers = container.querySelectorAll(".remove .wrap");
} else { //if single player
container = el.closest(".remove");
wrappers = container.querySelectorAll(".wrap");
}
wrappers.forEach(function (wrapper) {
if (wrapper.player) {
removePlayer(wrapper);
}
});
}
In the demo code here click on the same play button multiple times.
You will see the video stays reappearing.
https://jsfiddle.net/g1ztucmp/
How would that be fixed in the code I am working on so that the videos appear again after going back to view the same videos after they are removed.
Like how it works in the demo code I provided.

You are adding a class to wrap called active when you press the play button.
function showCover(playButton) {
const cover = playButton.parentElement;
cover.classList.add("active");
}
However, you never remove that class when closing the player(s). So when closing the player you need to remove the active class again. This is best done in the removePlayer function as you already iterate though al the classes that might have them.
function removePlayer(wrapper) {
wrapper.player.destroy();
wrapper.classList.remove("active");
delete wrapper.player;
console.log("removePlayer");
}
Change you Fiddle to make it work: https://jsfiddle.net/wqchdey1/. Only change was me adding wrapper.classList.remove("active"); to the removePlayer function

How can I use getElementById or querySelectorAll for an infinite number of IDs? (creating toggle buttons to show/hide divs)

Javascript noob here, as you can probably tell, and was wondering if anyone could help me clean this up. Trying to avoid Jquery, please.
It’s pretty basic: There’s a toggle button, a section of content, and a close button within that section of content. The content is hidden by default, but when the toggle button is clicked, the content becomes visible and the user gets auto-scrolled to it. When the close button is clicked, the section of content disappears and the user is auto-scrolled back up to the main section with all the toggle buttons.
This should be repeated for individual sections of content, with each unique content section associated with its corresponding toggle button.
JSFiddle: https://jsfiddle.net/bythrees/mw5nh1cd/51/
This works as intended but is there a way to clean up the Javascript so that if more than 2 sections of content are desired, it will happen automatically, without having to add another section — Toggle 3, Toggle 4, Toggle 5, and so on — to the JS? I was looking into querySelectorAll (I don't HAVE to be using IDs, can easily use classes) and map but don’t know how to make it work.
Here's the code I'm using. It just seems dumb if I have to repeat all of that for each Toggle, changing the numbers for each one.
document.addEventListener('DOMContentLoaded', function() {
const toggle1 = document.getElementById('toggle-1');
const toggleContent1 = document.getElementById('toggle-content-1');
const closeContent1 = document.getElementById('close-toggle-1');
const toggle2 = document.getElementById('toggle-2');
const toggleContent2 = document.getElementById('toggle-content-2');
const closeContent2 = document.getElementById('close-toggle-2');
// Toggle 1
if (toggle1) {
toggle1.addEventListener('click', () => {
toggleContent1.classList.toggle('show');
});
closeContent1.addEventListener('click', () => {
toggleContent1.classList.remove('show');
});
}
// Toggle 2
if (toggle2) {
toggle2.addEventListener('click', () => {
toggleContent2.classList.toggle('show');
});
closeContent2.addEventListener('click', () => {
toggleContent2.classList.remove('show');
});
}
});
Thanks in advance!

Jquery remove item from localstorage if the link is already clicked

I have a page with a few filters for search results. These filters are links and upon clicking, I am adding the id to localstorage. When the page reloads it looks in the localstorage if the id of the link exists, it modifies the css of that particular link. I am able to achieve this.
Now, when the same link is clicked again, I need to be able to remove the id of the link from localstoarage so it does not change the css when the page reloads.
Before Clicking
After clicking
Here is my code. Some kind people from StackOverflow helped me get this piece of code together. I need it to extend. Please let me know if any of this doesn't make sense. Would gladly rewrite my sentences.
$(document).ready(function() {
//localStorage.clear();
var cached = localStorage.getItem('filters');
var filters = (cached) ? JSON.parse(cached) : {};
for (id in filters) {
$('#' + id).addClass('li-checked');
}
$('.li-filter').click(function(e) {
//event.preventDefault();
$(e.target).addClass('li-checked');
$(e.target).removeClass('li-unchecked');
var id = $(e.target).attr('id').toString();
if (filters[id]) {
filters[id] += 1;
//filters = $.grep(filters, function(e) { return e.id!=id });
} else {
filters[id] = 1;
}
console.log(JSON.stringify(filters));
localStorage.setItem('filters', JSON.stringify(filters));
});
});

#Rohit If I understood your question correctly, onclick you have to add a class and remove it in case it is already clicked.
For this scenario, I will suggest writing functionality to toggle classes that can help.
You need to get class on the element while li is clicked.
if($(e.target).attr("class").contains("li-checked"))
{
$(e.target).removeClass('li-checked');
$(e.target).addClass('li-unchecked');
}
else if((e.target).attr("class").contains("li-unchecked"))
{
$(e.target).removeClass('li-unchecked');
$(e.target).addClass('li-checked');
}
If the class is 'li-checked' then remove it and add 'li-unchecked'
and if the class is 'li-unchecked' then remove it and add 'li-checked'
I hope it helps.

Cleaner way to run multi-event function

I'm essentially hiding a form until the user hovers over the call to action piece of the UI, and then sliding the form in while simultaneously sliding the CTA out. Then if the user clicks on the form it stays on the screen until focus is left. Otherwise the elements return to their original state on mouseleave. The animations are all handled with CSS transitions and transforms via adding classes with the js. I've got it working fine, but the js feels a little wet to me so I was curious if there might be a cleaner way to write this?
function fireNewsletter(){
$('.newsletter-container').bind("mouseenter focus", function() {
$(".newsletter-cta").addClass('hiding');
$(".newsletter-form").addClass('showing');
});
$(".newsletter-container").bind("mouseleave", function(){
if ( ! $(".newsletter-input").is(":focus")) {
$(".newsletter-cta").removeClass('hiding');
$(".newsletter-form").removeClass('showing');
}
});
$(".newsletter-input").focusout(function(){
$(".newsletter-cta").removeClass('hiding');
$(".newsletter-form").removeClass('showing');
});
}

I would probably just go with moving the show/hide logic into descriptively named functions and caching the references to the elements. It doesn't make it much shorter but it will perform better and it reads easier.
function fireNewsletter(){
var cta = $(".newsletter-cta"),
form = $(".newsletter-form"),
input = $(".newsletter-input"),
container = $(".newsletter-container");
function show () {
cta.addClass('hiding');
form.addClass('showing');
}
function hide () {
if (!input.is(":focus")) {
cta.removeClass('hiding');
form.removeClass('showing');
}
}
container.bind("mouseenter", show);
container.bind("focus", show);
container.bind("mouseleave", hide);
input.bind("focusout", hide)
}

I have three "a" class's that change color when selected, but I need one to be default on load of page

I'm working on this project and I need to add this functionality where we have three products listed.
they started out as div's but changed them to ahref class's to link the entire area.
The box has to change color when hovered - which I have done.
The box needs to change to another color when clicked on - which I have also done.
The one thing I can't figure out is how to make the 2nd box default as selected but then have the color turn off when another one is selected
This is the javascript I have for the page.
var highlightLink = function () {
var active = null, colour = '#f6efa2';
if (this.attachEvent) this.attachEvent('onunload', function () {
active = null;
});
return function (element) {
if ((active != element) && element.style) {
if (active) active.style.backgroundColor = '';
element.style.backgroundColor = colour;
active = element;
}
};
}();
here is one of the boxs
<a class="productBox1" href="#" border="0" onclick="highlightLink(this);">
I'm thinking I need an onload function in the body tag but I don't know what code is needed and I also need it to become unselected when another box is selected.
Any help would be greatly appreciated.

If every link has it's own class anyway, use it as ID instead:
<a id="productBox1" href="#" border="0" onclick="highlightLink(this);">
Use classes for common properties. For identifying single elements, use IDs.
Then you can add this to the bottom of your page (above the closing <body> tag):
<script type="text/javascript">
highlightLink(document.getElementById('productBox1'));
</script>
or set
window.onload = function() {
highlightLink(document.getElementById('productBox1'));
}
in the <head>.

Sounds like you're making this more complicated than it really is. Try this (I'm assuming all your a tags have class productBox1):
$('.productBox1').click(function() {
$('.highlighted').removeClass('highlighted');
$(this).addClass('highlighted');
});
Then have a css class called highlighted which has background-color: #f6efa2.
You need jQuery in order to make this work properly.