Develop Reference

Can't delete all cards that were created by forEach

This forEach loop creates html elements (cards) when user click the button but if user click the button again all cards supposedly must be deleted. In my case when I click the button again only the first card is gone. I know that it smth has to do with id. I tried to do this () but I have no idea what to do next to delete all cards. thanks for attention
function getFood(){
if (foodBtn.classList.contains("yes")){
fetch("http://localhost:1314/getByType/food")
.then((resp => {
return resp.json();
}))
.then((resp) => {
resp.forEach(elem => {
div.innerHTML += `<div id="MyFood">
<div class="card" style="width: 18rem;">
<img src="${elem.image}" class="card-img-top" alt="...">
<div class="card-body">
<b>price: ${elem.price} $</b>
<p class="card-text">description: ${elem.description}</p>
<p class="card-text">amount: ${elem.amount}</p>
</div>
</div>
</div>`
})
})
foodBtn.classList.remove("yes");
foodBtn.classList.add("no");
}else {
const q = document.getElementById('MyFood');
console.log(q);
q.innerHTML = "";
foodBtn.classList.remove("no");
foodBtn.classList.add("yes");
}
}

You are indeed right. In html IDs are unique so using the same ID for multiple instances may not work as expected. The solution is either add something in the generation that would create unique IDs such as
resp.forEach((elem, index) => {
div.innerHTML += `<div id="MyFood${index}">
<div class="card" style="width: 18rem;">
<img src="${elem.image}" class="card-img-top" alt="...">
<div class="card-body">
<b>price: ${elem.price} $</b>
<p class="card-text">description: ${elem.description} </p>
<p class="card-text">amount: ${elem.amount}</p>
</div>
</div>
</div>`
})
or use a class instead of an ID (I would personally go with this)
resp.forEach(elem => {
div.innerHTML += `<div class="MyFood">
<div class="card" style="width: 18rem;">
<img src="${elem.image}" class="card-img-top" alt="...">
<div class="card-body">
<b>price: ${elem.price} $</b>
<p class="card-text">description: ${elem.description}</p>
<p class="card-text">amount: ${elem.amount}</p>
</div>
</div>
</div>`
})
Then to select and delete just call
const q = document.querySelectorAll('.MyFood');
for (let i = 0; i < q; i++) {
q[i].remove();
}

Multiple HTML elements may not share the same ID. That's why when you try to select #MyFood you're only getting one. Instead, you can change it to classes, which are sort of like IDs for multiple elements. In div.innerHTML += ..., change the first part of the string from <div id="MyFood" ... to <div class="MyFood" ..., then in your else you need to change the selector to classes:
const elements = [...document.getElementsByClassName("MyFood")]; // you can also do: [...document.querySelectorAll(".MyFood")]
elements.forEach(el => el.remove()); // loop through array of elements and remove each one
// ...
Learn more about the selector: https://developer.mozilla.org/en-US/docs/Web/API/Document/getElementsByClassName

It is certainly an id issue. If multiple HTML elements share the same id, when you call getElementById() only the first element with that id will get called. To fix this without changing much of your code, you instead of using id you can try setting class="MyFood" then call getElementsByClassName() method.
A different approach, if for some reason you need the id="MyFood" element to appear in your code, is to wrap all your cards inside a div like this:
<div id="MyFood">
...cards here
</div>
then the rest of your code will work without changing anything.

Changing innerHTML

I am trying to change the innerHTML of a page twice, more explanation, I am trying to make a single page like app. I'm a newbie. I want to change the inner HTML content of the section after one click then get the classList of the changed inner HTML then change it again, but it does not seem to work, I don't know what I am doing wrong.
my thought process for the code is below
select the whole container which is the features container
on click, change the container innerHTML
on click of the changed container innerHTML, change the inner HTML again but It doesn't work, it keeps giving me the first innerHTML but when i do not display the main container that works, how can i solve this?
const hold = document.querySelector('#features');
const holds = document.querySelector('.features');
let hel;
hold.addEventListener('click', function() {
holds.innerHTML = `<div class="ddd">h is here </div>`;
// const self = this;
hel = document.querySelector('.ddd');
// console.log(hel.innerText);
hel.addEventListener('click', function() {
// holds.style.display = 'none';
// this.style.display = 'none';
holds.innerHTML = '<div class="q">mess</div>';
console.log(this);
});
});
<section id="features" class="features section-hidden">
<div class="container container-pal1">
<h2 class="features-description highlight">Features</h2>
<div class="features-contain">
<div class="features-text">
<h3 class="features-header">
We are here to provide you with the
<span class="features-highlight">Best</span> services
</h3>
<p class="features-title">
Everything you need in a modern bank and more, get on our waiting list today by clicking the button below
</p>
<a href="" class="hero-cta-1 features-button">View our services <img src="./assets/arrow-right.svg" alt="" />
</a>
</div>
<div class="features-props">
<div class="features-list">
<div class="features-item">
<img src="./assets/fast-delivery.svg" alt="" />
<h5>Swift Delivery 🚀</h5>
<p>No late transfer, get it instantly</p>
</div>
<div class="features-item">
<img src="./assets/0-fees.svg" alt="" />
<h5>$0 Fee's</h5>
<p>No fees on your account like the other banks</p>
</div>
<div class="features-item">
<img src="./assets//0-interest.svg" alt="" />
<h5>Interest &percnt;</h5>
<p>
Interest when applying for loans depends on your agreement from the bank
</p>
</div>
<div class="features-item">
<img src="./assets/no-credit-check.svg" alt="" />
<h5>Credit Card</h5>
<p>Credit cards available at your demand</p>
</div>
<div class="features-item">
<img src="./assets/chat-support.svg" alt="" />
<h5>Chat Support</h5>
<p>Chat with a company representative anytime</p>
</div>
<div class="features-item">
<img src="./assets/fixed-payment-option.svg" alt="" />
<h5>Fixed Payment Option</h5>
<p>Payment Options will be provided</p>
</div>
</div>
</div>
</div>
</div>
</section>

Here's a simple example how to switch elements that already exist in the DOM.
Use a data-* attribute to reference the desired ID element to show.
Use classList.toggle to switch the Elements.
const ELS_pages = document.querySelectorAll(".page");
const ELS_buttons = document.querySelectorAll("[data-page]");
const goToPage = (id) => {
ELS_pages.forEach(EL => EL.classList.toggle("u-none", EL.id !== id));
};
ELS_buttons.forEach(EL => EL.addEventListener("click", () => {
goToPage(EL.dataset.page);
}));
nav {display: flex;} nav a {color: #00f; padding: 5px 10px; cursor: pointer; }
/* Utility classes */
.u-none {display: none;}
<div class="page" id="page-login">
<h1>Welcome</h1>
<button type="button" data-page="page-main">ENTER</button>
</div>
<div class="page u-none" id="page-main">
<nav>
<a data-page="page-settings">User Settings</a>
<a data-page="page-login">Logout</a>
</nav>
<h1>MAIN PAGE</h1>
</div>
<div class="page u-none" id="page-settings">
<nav>
<a data-page="page-main">Back to Main</a>
<a data-page="page-login">Logout</a>
</nav>
<h1>SETTINGS PAGE</h1>
</div>
This is basic, and does not change the URI address in the browser. To achieve that some more code should be added to handle such case.

Try keeping a flag(if there are only two different data you want to show) and based on the flag show data or a counter
const hold = document.querySelector('#features');
let count = 0;
hold.addEventListener('click', function() {
switch (count){
case 0:
holds.innerHTML = `<div class="ddd">h is here </div>`;
case 1:
holds.innerHTML = `<div class="ddd">now some other is here </div>`
};
});
and please provide more info for the remaining answer

Simply run your second innerHTML code after the next repaint using requestAnimationFrame and it will work.
const hold = document.querySelector("#features");
const holds = document.querySelector(".features");
let hel;
hold.addEventListener("click", function (e) {
e.preventDefault();
holds.innerHTML = `<div class="ddd">h is here </div>`;
// const self = this;
hel = document.querySelector(".ddd");
// console.log(hel.innerText);
hel.addEventListener("click", function () {
// holds.style.display = 'none';
// this.style.display = 'none';
requestAnimationFrame(() => {
holds.innerHTML = '<div class="q">mess</div>';
});
console.log(this);
});
});
if you need further information about why it's happening read this article.

JS / jQuery - How together innerHTML of targeted element of a certain class and append /replace it?

I want to get the text on click with a certain class but nothing works. I have a div with 2 p tags and I want to get both separate. Also, I want to append them. .append() appends but just keeps adding all targeted events. empty().append() gives me random results (on first click it works, on second I get half of the text etc). Ive tried most of what I could find on stack overflow but nothing helped. Any help would be great!
Ive tried:
$(event.target).text(); //that gives me the text, but not both p elements separate
$(this).hasClass('.video-title'); //only returns to me true/false
var title= document.getElementsByClassName("video-title")[0].innerHTML; //doesn't give me the current element.
$('p.video-title').innerHTML; //doesnt help either
HTML
<div class="video-container">
<iframe id="vid_frame" src="https://www.youtube.com/embed/xxx?rel=0&showinfo=0&autohide=1" width="900" height="450"></iframe>
<div id="video-info"></div>
</div>
<div class="col-sm-4 video-col">
<div class="video-wrapper" onClick="attachSrc('yyy', event)">
<img src="assets/images/thumbnail/yourHeart_official.jpg" width="260" height="160">
<div class="overlay">
<p class="video-title">title 1</p>
<p class="video-author">author 1</p>
</div>
</div>
</div>
<div class="col-sm-4 video-col">
<div class="video-wrapper" onClick="attachSrc('xxx', event)">
<img src="assets/images/thumbnail/yourHeart_karaoke.jpg" width="260" height="160">
<div class="overlay">
<p class="video-title">title 2</p>
<p class="video-author">author 2</p>
</div>
</div>
</div>
<script>
function attachSrc(id, event) {
var text = $(event.target).text();
$('#video-info').append(text);
}
</script>

As you are using jQuery, I would recommend you to use unobtrusive event handler and use .on() to attach event handlers.
Here in example I have attached event with wrapper element and DOM traversal method to traverse and target desired element.
And to persists arbitrary data use data-* prefixed custom attribute which can be fetched using .data(key)
<div class="video-wrapper" data-id="yyy">
Script
$('.video-col').on('click', '.video-wrapper', function() {
var elem = $('#video-info').empty();
var title = $(this).find('.video-title').text();
elem.append(title);
console.log(title);
var author= $(this).find('.video-author').text();
elem.append(author);
console.log(author);
console.log($(this).data('id'));// To fetch custom data associated with element
});
$(function() {
$('.video-col').on('click', '.video-wrapper', function() {
console.clear();
var elem = $('#video-info').empty();
var title = $(this).find('.video-title').text();
elem.append(title);
console.log(title);
var author = $(this).find('.video-author').text();
elem.append(author);
console.log(author);
console.log($(this).data('id')); // To fetch custom data associated with element
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="video-container">
<div id="video-info"></div>
</div>
<div class="col-sm-4 video-col">
<div class="video-wrapper" data-id="yyy">
<img src="assets/images/thumbnail/yourHeart_official.jpg" width="260" height="160">
<div class="overlay">
<p class="video-title">title 1</p>
<p class="video-author">author 1</p>
</div>
</div>
</div>
<div class="col-sm-4 video-col">
<div class="video-wrapper" data-id="xxx">
<img src="assets/images/thumbnail/yourHeart_karaoke.jpg" width="260" height="160">
<div class="overlay">
<p class="video-title">title 2</p>
<p class="video-author">author 2</p>
</div>
</div>
</div>

How to make a certain div visible while hovering an image?

<div class="parent">
<div class="parent.child">
<div class="parent.chil.child">
<div class="parent.chil.child.child">
<img src ="link0" >
<img src ="link1" >
<img src ="link2" >
</div>
</div>
</div>
<h4>
text
</h4>
<div class="imgClass0">
<p>some text</p>
</div>
<div class="imgClass1">
<p>some text</p>
</div>
<div class="imgClass2">
<p>some text</p>
</div>
Hey guys !
I have a problem. I have a div whithin I can have one or more <img> nodes, depends how the server generates the DOM (there can be one or many, depends on a number from the database.
There are several <div> elements under the <h4> node, the number of them is equal to the number of <img> elements from above.
I need help in making a javascript that makes "imgClass1" visible when I hover <img src ="link1" >, and the other imgClassX, X=(1..n) invisible, and so on. I give them default visibility display:none, but I need imgClass0 to have default visibility:visible.
Best regards,
iusmar.

You can attribute starts with selector along with :eq() selector:
$('img[src^=link]').hover(function() {
var idx = $(this).index();
$('div[class^="imgClass"]:eq(' + idx + ')').show();
}, function() {
var idx = $(this).index();
$('div[class^="imgClass"]:eq(' + idx + ')').hide();
});
Fiddle Demo

try like this
$("img[src=link1]").hover(function(){
$("div[class^='imgClass']").hide();
$(".imgClass1").show();
});
fiddle

First, you should put a class on your images to use as a selector. You should also put the image ID as a data attribute on the tags. This will allow you to easily assign an event handler when hovering these images, and also easily extract the image ID:
<img src="link0" class="yourImages" data-image-id="0">
<img src="link1" class="yourImages" data-image-id="1">
<img src="link2" class="yourImages" data-image-id="2">
You could also apply that ID to the divs:
<div class="images" data-image-id="0">
<p>some text</p>
</div>
<div class="images" data-image-id="1">
<p>some text</p>
</div>
<div class="images" data-image-id="2">
<p>some text</p>
</div>
Then you can bind a hover handler to the yourImages class, get the ID from the hovered element, hide all image divs then show only the required one:
$('.yourImages').hover(function() {
var imageID = $(this).data('image-id');
$('.images').hide();
$('.images[data-image-id="' + imageID + '"]').show();
}, function() {
$('.images').hide();
});
What do you want to do when you stop hovering over any images? My example just hides them all again.

Add a class / id just like following for the images
<img class="img0" src ="link0" >
<img class="img1" src ="link1" >
<img class="img2" src ="link2" >
and try the following javascript
$("img").hover(function (){
var cls=$(this).attr("class");
$("div[class^='imgClass']").hide();
var visibleCls=".imgClass"+(parseInt(cls.replace("img","")));
$(visibleCls).show();
});

Javascript mouseover/mouseout animation working for first iteration only

I created a javascript animation to move a picture to the right when on mouseover and to go back to its resting position when the mouse exits the image. It works flawlessly for the first image but when I try the other iterations the first image moves instead of the one I hover on.
Here is the HTML code:
<div class="sectionJoueur">
<div class="scroller">
<figure id="infos" class="nomPositionCourt A">
<img src="images/infoMathieuD.png">
</figure>
<figure class="img">
<img src="images/md.jpg">
</figure>
</div>
</div>
<div class="sectionJoueur">
<div class="scroller">
<figure id="infos" class="nomPositionCourt B">
<img src="images/infoMathieuD.png">
</figure>
<figure class="img">
<img src="images/md.jpg">
</figure>
</div>
</div>
<div class="sectionJoueur">
<div class="scroller">
<figure id="infos" class="nomPositionCourt C">
<img src="images/infoMathieuD.png">
</figure>
<figure class="img">
<img src="images/md.jpg">
</figure>
</div>
</div>
I'm trying to use the classes names "class="nomPositionCourt A">" the target the specific image being hovered on but it doesn't seem to be working.
Here is the JS code:
function over(){
if ( $("#infos").hasClass("A") ){
$("#infos").stop().animate({"margin-left": +0});
$(".img").mouseleave(out);
}
else if ( $("#infos").hasClass("B") ){
$("#infos").stop().animate({"margin-left": +0});
$(".img").mouseleave(out);
}
}
function out(){
$("#infos").stop().animate({"margin-left": -287});
}

At first glance, it looks like the reason is that both of your images are using the same ID tag (which is bad practice).
This is the code I'm looking at:
figure id="infos"
You are using that same ID tag twice. When your code runs, it's picking up the first "infos" tag it comes to, which is your first image.
Make sure to use unique ID tags and this should help resolve your problem.

You have assigned the id attribute to more than one element which suppose to be unique id="infos" class can be assigned to multiple elements but id should be unique
Try this one by changing the id to class
$(".nomPositionCourt").hover(function(){
if ( $(this).hasClass("A") ){
$(this).stop().animate({"margin-left": +0});
$(".img").mouseleave(out);
}
else if ( $(this).hasClass("B") ){
$(this).stop().animate({"margin-left": +0});
$(".img").mouseleave(out);
}
},function(){
$(this).stop().animate({"margin-left": -287});
})
In $(this) you have the object of current hovered image
Here is the Reference