We Keep Coding

Why does the addEventListener property does not work on a dynamic HTMLcollection object?

I am working on a chrome extension and trying to add an event listener to a getElementsByClassName variable, in which elements are added dynamically using template strings.
I have tried a lot of changes in the code, but the code doesn't work.
The code is supposed to delete the targeted element from the array "recipeList", storing the array in localStorage and then render the updated array "recipeList" using template string to the HTML code again.
DELETE BUTTON Function
let delBtn = document.getElementsByClassName("del-btn");
for(let i = 0; i < delBtn.length; i++) {
delBtn[i].addEventListener("click", function() {
recipeList.splice(i, 1);
localStorage.setItem("recipeList", JSON.stringify(recipeList));
recipeList = JSON.parse(localStorage.getItem("recipeList"));
render(recipeList);
if(!recipeList.length) {
tabBtn.style.width = "100%";
delAllBtn.style.display = "none";
}
});
}
RENDER CODE
function render(list) {
let recipeURL = "";
for(let i = 0; i < list.length; i++) {
recipeURL += `
<div class="mb-2 row">
<div class="col-1 num-btn">
${i+1}
</div>
<div class="col-10">
<div class="recipe-url">
<a target="_blank" href="${list[i]}">
${list[i]}
</a>
</div>
</div>
<div class="col-1 del-btn">
<a href="#">
<i class="bi bi-trash-fill"></i>
</a>
</div>
</div>
`
}
urlList.innerHTML = recipeURL;
console.log(delBtn);
}

When you render, you create new .del-btn which are not included in your first let delBtn = document.getElementsByClassName("del-btn");.
Each time you create new .del-btn, you should also add a new listener.
function render(list) {
let recipeURL = "";
for(let i = 0; i < list.length; i++) {
recipeURL += `
<div class="mb-2 row">
<div class="col-1 num-btn">
${i+1}
</div>
<div class="col-10">
<div class="recipe-url">
<a target="_blank" href="${list[i]}">
${list[i]}
</a>
</div>
</div>
<div class="col-1 del-btn">
<a href="#">
<i class="bi bi-trash-fill"></i>
</a>
</div>
</div>
`
}
urlList.innerHTML = recipeURL;
console.log(delBtn);
Array.from(urlList.querySelectorAll('.del-btn')).forEach((btn, i) => {
btn.addEventListener('click', () => console.log('.del-btn index: ' + i))
})
}
}

Javascript function not reachable after settimeout

I have designed following code snippet:
<div id="content">
<h3>Select Images Below</h3>
<ul id="imagegallery">
<li>
<a class='a' href="./img/team/t1.jpg" title="The crowd goes wild" onclick="">
<img src="./img/team/t1.jpg" height="50px" width="50px" alt="the band in concert" />
</a>
</li>
<li>
<a class='a' href="./img/team/t2.jpg" title="An atmospheric moment">
<img src="./img/team/t2.jpg" height="50px" width="50px" alt="the bassist" />
</a>
</li>
<li>
<a class='a' href="./img/team/t3.jpg" title="Rocking out">
<img id='image' src="./img/team/t3.jpg" height="50px" width="50px" alt="the guitarist" />
</a>
</li>
<li>
<a class='a'href="./img/team/t4.jpg" title="Encore! Encore!">
<img id='image' src="./img/team/t4.jpg" height="50px" width="50px" alt="the audience" />
</a>
</li>
</ul>
<div>
<img id='placeholder', src="./img/resources/neutral_1.jpg", height="450px" width="550px" alt="Image gooes here", style="margin-bottom: 50px;padding: 10px;">
</div>
<div id="loading">
<img src="img/loading.gif" alt="">
</div>
<div id="show">
<h1 id ='h'>It works</h1>
</div>
</div>
and the JS for this code is something like this
window.onload = function() {
var links = document.getElementsByClassName('a');
for (var i = 0; i < links.length; i++) {
links[i].addEventListener('click', function(e) {
// Hide results
document.getElementById('placeholder').style.display = 'none';
// Show loader
document.getElementById('loading').style.display = 'block';
setTimeout(showpic(this), 2000);
e.preventDefault();
});
}
function showPic(whichpic) {
document.getElementById('placeholder').style.display = 'block';
var source = whichpic.getAttribute('href');
var placeholder = document.getElementById('placeholder');
placeholder.setAttribute('src', source);
return false;
}
};
I am trying to show the clicked image in the placeholder below,reading the source from href of a tags and assigning it to src of placeholder, but the problem I am facing is that showpic is never called/reached. how should i modify my code to resolve this problem. I click the image, loader appears and then image loads in browser window

This is not correct
setTimeout(showpic(this), 2000);
You should pass a function to setTimeout but you are calling it and actually passing some result of one's execution. You should do like this, for example
setTimeout(() => showpic(this), 2000);
You have a typo. You declare your function as showPic but call it as showpic

Correct showpic(this) to () => showpic(this).Your call to the showPic function is misspelled. Also your showPicfunction does not need to be wrapped inside of your window.onload function. Your JS should look like this and it should work:
window.onload = function() {
var links = document.getElementsByClassName('a');
for (var i = 0; i < links.length; i++) {
links[i].addEventListener('click', function(e) {
// Hide results
document.getElementById('placeholder').style.display = 'none';
// Show loader
document.getElementById('loading').style.display = 'block';
setTimeout(() => showPic(this), 2000);
e.preventDefault();
});
}
}
function showPic(whichpic) {
document.getElementById('placeholder').style.display = 'block';
var source = whichpic.getAttribute('href');
var placeholder = document.getElementById('placeholder');
placeholder.setAttribute('src', source);
return false;
}

My code to change the language of my website does not work

I've made a language switcher for my website, and it was working until I decided to store the text on a local .json file. It kind of works because it reads the text when loading the page, but when you try to change the language it does not work. This is my JavaScript code:
/*This is a list of all the id's I want to change*/
let ids = ["titleText", "llenguatge", "runBut", "trainBut", "resultText", "atention", "warn", "coll0but"]
function catalan() {
/*I load the json file from the folder. This is the part that doesn't work*/
$.getJSON("scripts/json/text_cat.json", function(cat) {
console.log(cat);
for (let i = 0; i < ids.length; i++) {
/*For every element with that id, change the text corresponding with that id (in the json file, the title is the same as the id)*/
document.getElementById(ids[i]).innerHTML = cat[ids[i]]
}
});
/*This part does work*/
console.log("Language has changed to catalan")
}
function spanish() {
$.getJSON("scripts/json/text_cas.json", function(cas) {
console.log("funciona?")
console.log(cas);
for (let i = 0; i < ids.length; i++) {
document.getElementById(ids[i]).innerHTML = cas[ids[i]]
}
});
console.log("Language has changed to spanish")
}
function english() {
$.getJSON("scripts/json/text_en.json", function(en) {
console.log(en);
for (let i = 0; i < ids.length; i++) {
document.getElementById(ids[i]).innerHTML = en[ids[i]]
}
});
console.log("Language has changed to english")
}
Json file:
{
"titleText":"Blah blah",
"llenguatge":"Language",
"runBut":"Guess",
"trainBut":"Train",
"resultText":"Result:",
"atention":"Warning!",
"warn":"Blah blah blah",
"coll0but":"Color tools",
}
(Edit) Here's the HTML:
<div class="Content">
<div id="nn_container">
<div id="canvas" style="display: inline-block;"></div>
<div>
<span id="result" class="eqCont">
<div id="run" class="half"></div>
<div id="answer" class="half">
<div id="lastColor">
<b id="resultText"></b>
<span id="clar" class="reult"></span>
</div>
</div>
</span>
</div>
</div>
<div id="info">
<div id="Warning1" class="warning">
<strong id="atention"></strong> <p class="text" id="warn"></p>
</div>
</div>
</div>
How should I fix it?

How to make a JavaScript to JQuery conversion

I need a bit of help converting javascript to jquery. I'm using an accordion for a website i
I'm creating.
var acc = $(".accordion");
var i;
for (i = 0; i < acc.length; i++) {
acc[i].onclick = function(){
this.classList.toggle("active");
this.nextElementSibling.classList.toggle("show");
}
}
Here's the HTML:
<div id="our-club-accordion">
<button class="accordion">Our Goal</button>
<div class="panel">
</div>
<button class="accordion">Our Mission</button>
<div class="panel">
</div>
</div>

Seems it is that you need:
$('.accordion').on('click', function() {
$(this).toggleClass('active').next().toggleClass('show');
});

A better way to do this with ReactJS?

Well.. I'm new in ReactJS, I'm AngularJS developer.
I have a problem... I need click on link and render a with a youtube iframe video.
I did, but...
Below the code:
<div class="news-box -hero">
<a href="#" class="news-cover -play -video">
<img src="images/news4.jpg" alt="" class="cover">
<div class="video-box" video-id="uoNPBcEBmFg"></div>
</a>
<a href="#" class="news-info" style="border-color: #174489">
<h3>Title</h3>
<p>Date and Hours</p>
</a>
</div>
I need that when click on '.-video' shows youtube iframe inside '.video-box'.
Will have many '.-video'.
I did so:
/**
* Video
*/
var VideoBox = React.createClass({
render: function () {
return (
<iframe width="70%" height="100%" src={'https://www.youtube.com/embed/' + this.props.videoId + '?rel=0&autoplay=1'} frameBorder="0" allowFullScreen></iframe>
);
}
});
/**
* When click on '-video'
*/
var videos = document.querySelectorAll('.-video');
for (var i = 0, t = videos.length; i < t; i++) {
var video = videos[i];
video.addEventListener('click', function(e) {
e.preventDefault();
var videoBox = video.querySelector('.video-box'),
id = videoBox.getAttribute('video-id');
React.render(
<VideoBox videoId={id} />,
videoBox
);
videoBox.style.display = 'block';
});
}
Yes, it works! There is a better way to do this?
Thanks!