Develop Reference

Event Listener not working when trying to close modal windows

I have this modal that opens when clicking a button, but the close button won't work, here's my HTML and JS code. Hope you can help me.
HTML
<div class="portfolio-modal flex-center">
<div class="portfolio-modal-body">
<i class="fas fa-times portfolio-close-btn"></i>
<h3>My MovieDB</h3>
<img src="https://pics.me.me/thumb_newspaper-dad-charizard-meme-is-not-amused-53734653.png" alt="">
<p>Lorem ipsum dolor sit amet consectetur, adipisicing elit. Voluptate, debitis ipsum quo sint nulla aspernatur illum</p>
</div>
</div>
JS
const portfolioModals = document.querySelectorAll(".portfolio-modal");
const imgCards = document.querySelectorAll(".img-card");
const portfolioCloseBtns = document.querySelectorAll(".portfolio-close-btn");
let portfolioModal = function(modalClick) {
portfolioModals[modalClick].classList.add("active");
}
imgCards.forEach((imgCard, i) => {
imgCard.addEventListener("click", () => {
portfolioModal(i);
});
});
portfolioCloseBtns.forEach((portfolioCloseBtn) => {
portfolioCloseBtn.addEventListener("click", () => {
portfolioModals.forEach((portfolioModalView) => {
portfolioModalView.classList.remove("active");
});
});
});

CPU overheating when uploading images with JavaScript

The problem is simply that I wrote the code below to upload random text and images with the same name but the last number in names changed, but this leads to an increase in the processor temperature,
here is the code :
let ctn=document.getElementById("y_main");
function mainCtn(str,i){
var post= ` <section class="y_post">
<article class="y_post_article">
<h3>${str}</h">
<p> Lorem ipsum dolor sit amet consectetur adipisicing elit.
Enim error dolores nulla vero animi a ex perspiciatis repellendus neque
doloremque! Dolor culpa odio ea, excepturi eaque in similique tempore earum!</p>
<img width="200px" src="image/postimage/img_post${i}.pn" alt="post img">
</article>
<section class="y_post_btn">
<button class="post_lbtn"><img src="icon/check.svg" alt="chat" srcset=""></button>
<button class="post_cobtn"><img src="icon/chat-square-text.svg" alt="chat" srcset=""></button>
<button class="post_shbtn"><img src="icon/share.svg" alt="chat" srcset=""></button>
</section>
<div class="y_comment_block">
<button class="close_btn_comment">close</button>
<p class="text_comment"></p>
<div class="comment_tool">
<textarea name="" class="input_comment" cols="30" rows="1" placeholder="insert comment"></textarea>
<button class="btn_comment">add</button>
</div>
</div>
</section>`
return post;
}
let b=1;
setInterval(function () { if(b<12){
ctn.innerHTML+=mainCtn(`#${b}`,b);b++;
}
else{
clearInterval(myInterval);
}
}, 2000);

Just like #KompjoeFriek mentioned you need the setInterval ID, not an id you hardcode.
let b =1
const myInterval = setInterval(function () {
if(b<12){
ctn.innerHTML+=mainCtn(`#${b}`,b);b++;
} else{
clearInterval(myInterval);
}
}, 2000);
This should work.

Object value can't be read in my todoList

I made a TODO list where you can type in something you have to do. When you click on save, the system will add it as a todo-item. When I click on the V the todo item will change to a done item but it can't read the value of it.
How can I fix this? What did I wrong so the code doesn't read the input value?
const $textArea = document.getElementById("todo-input");
const $saveBtn = document.getElementById("save-btn");
const $todoList = document.getElementById("todo-list");
const $todoCount = document.getElementById("todo-count");
const $doneList = document.getElementById("done-list");
const $doneCount = document.getElementById("done-count");
const $clearAllBtn = document.getElementById("clear-all-btn");
const state = {
focusIndex: NaN,
todoList: [],
doneList: [],
};
function setState() {
fetch("https://phpstack-224488-1624928.cloudwaysapps.com/_/items/todo?filter%5Bdone%5D%5Beq%5D=0", {
method: "GET",
headers: {
Authorization: "bearer ABcEHA2kcrKY4a6ipUA3",
},
}).then((response) => {
if (!response.ok) {
throw new Error("could not fetch todoItems");
}
return response.json();
}).then(function(body) {
state.todoList = body.data;
printTodoList();
}).catch((err) => {
console.error(err);
});
}
function printTodoList() {
$todoList.innerHTML = "";
let template = "";
for (let i = 0; i <
state.todoList.length; i++) {
template += ` <div class="box ${
i === state.focusIndex ? " active " : " "
}" data-index="${i}">
<p>${state.todoList[i].description}</p>
<a class="done-btn fas fa-check-circle fa-2x"></a>
</div>`;
}
$todoList.insertAdjacentHTML("beforeend", template);
$todoCount.innerText = state.todoList.length;
}
function printDoneList() {
$doneList.innerHTML = "";
let template = "";
for (let i = 0; i <
state.doneList.length; i++) {
template += ` <div class="box">
<p>${state.doneList[i]}</p>
<a class="remove-btn fas fa-times-circle fa-2x" data-index="${i}"></a>
</div>`;
}
$doneList.insertAdjacentHTML("beforeend", template);
$doneCount.innerText = state.doneList.length;
console.log($doneList);
}
function saveBtnClicked() {
const body = {
description: $textArea.value,
done: false,
};
fetch("https://phpstack-224488-1624928.cloudwaysapps.com/_/items/todo", {
method: "POST",
headers: {
Authorization: "bearer ABcEHA2kcrKY4a6ipUA3",
"Content-Type": "application/json",
},
body: JSON.stringify(body),
}).then((response) => {
if (!response.ok) {
throw new Error("could not save todoItem");
}
return response.json();
}).then(function(body) {
state.todoList.push(body.data);
printTodoList();
}).catch((err) => {
console.error(err);
});
}
function todoListClicked(event) {
const $target = event.target;
if ($target.matches(".done-btn")) {
const curIndex = $target.closest(".box").dataset.index;
const doneItem = state.todoList.splice(curIndex, 1);
state.doneList.push(doneItem[0]); // state.doneList = state.doneList.concat(doneItem); // alternatief printTodoList(); printDoneList(); } if ($target.matches(".box") || $target.matches(".box p"))
{
const curIndex = parseInt($target.closest(".box").dataset.index);
state.focusIndex = curIndex === state.focusIndex ? NaN : curIndex;
printTodoList();
}
}
function doneListClicked(event) {
const $target = event.target;
if ($target.matches(".remove-btn")) {
const curIndex = $target.dataset.index;
state.doneList.splice(curIndex, 1);
printDoneList();
}
}
function clearAllBtnClicked() {
state.todoList = [];
state.doneList = [];
printTodoList();
printDoneList();
}
$saveBtn.addEventListener("click", saveBtnClicked);
$todoList.addEventListener("click", todoListClicked);
$doneList.addEventListener("click", doneListClicked);
$clearAllBtn.addEventListener("click", clearAllBtnClicked);
printDoneList();
setState();
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<meta http-equiv="X-UA-Compatible" content="ie=edge" />
<title>TODO or not TODO</title>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bulma/0.7.2/css/bulma.min.css" />
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.5.0/css/all.css" integrity="sha384-B4dIYHKNBt8Bc12p+WXckhzcICo0wtJAoU8YZTY5qE0Id1GSseTk6S+L3BlXeVIU" crossorigin="anonymous" />
<link rel="stylesheet" href="style.css" />
</head>
<body>
<section class="hero is-primary">
<div class="hero-body">
<div class="container">
<h1 class="title">TODO or not TODO</h1>
</div>
</div>
</section>
<div class="container">
<section class="section">
<div id="input-container">
<div class="field">
<div class="control">
<textarea id="todo-input" class="textarea is-success" placeholder="What to do?"></textarea>
</div>
</div>
<div class="field is-grouped">
<p class="control is-expanded">
<button id="save-btn" class="button is-success is-fullwidth">
Save
</button>
</p>
<p class="control">
<button id="clear-all-btn" class="button is-danger">
Clear All
</button>
</p>
</div>
</div>
</section>
<section class="count-container">
Todo: <span id="todo-count">5</span>
</section>
<section id="todo-list" class="section no-top-padding">
<div class="box active">
<p>
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Accusamus ad aliquam debitis dolores eos excepturi iusto libero, magnam nulla pariatur provident quibusdam quod, repellendus. A illum laudantium quas reprehenderit voluptas?
</p>
<a class="done-btn fas fa-check-circle fa-2x"></a>
</div>
<div class="box">
<p>
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Accusamus ad aliquam debitis dolores eos excepturi iusto libero, magnam nulla pariatur provident quibusdam quod, repellendus. A illum laudantium quas reprehenderit voluptas?
</p>
<a class="done-btn fas fa-check-circle fa-2x"></a>
</div>
<div class="box">
<p>
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Accusamus ad aliquam debitis dolores eos excepturi iusto libero, magnam nulla pariatur provident quibusdam quod, repellendus. A illum laudantium quas reprehenderit voluptas?
</p>
<a class="done-btn fas fa-check-circle fa-2x"></a>
</div>
</section>
<section class="count-container">
Done: <span id="done-count">5</span>
</section>
<section id="done-list" class="section no-top-padding">
<div class="box">
<p>
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Accusamus ad aliquam debitis dolores eos excepturi iusto libero, magnam nulla pariatur provident quibusdam quod, repellendus. A illum laudantium quas reprehenderit voluptas?
</p>
<a class="remove-btn fas fa-times-circle fa-2x"></a>
</div>
</section>
</div>
<script src="script.js"></script>
</body>
</html>

change element value into other symbols

Good day everyone,
i am trying to change value of each element inside body by using pure js without any framework.
for example, you open console insert js and it changes all the values in each element of body into other symbols.
So basically i can get all the visible words on the website for user without any html markdowns.
like:
<li>This is text</li>
t->p
h->s
i->e
s->l
e->o
x->z
will be
<li>Psel el pozp</li>
so, don't know how to loop through each elements value.
this is what i tried
var elems = document.body.getElementsByTagName("*");
for (i = 0; i < elems.length; i += 1) {
if (elems[i].innerHTML.indexOf('<script') != -1){
console.log(elems[i]);
} else {
continue;
}
}
function validate(element){
if(element.indexOf('<div') == -1){
return false;
} else if(element.indexOf('<script') == -1){
return false;
} else {
return true;
}
}
but cannot get it to work.
updated:
i think it is my bad. i didnt say that i need to change the values on fly. i mean if i insert the code in console, it should loop through each element, get it value, change values by replacing each letter into another letter, then put the value back instead of the old one. eventually it looks on the web different. thank you in advance.
so i need the code to loop through each element, get its value, do something with it and then put it back.
in bold is what i cannot do. thank you to everyone in advance.

First, in your for loop, add the call to validate. Then in validate, add the text replacement:
var elems = document.body.getElementsByTagName("*");
for (i = 0; i < elems.length; i += 1) {
if (elems[i].innerHTML.indexOf('<script') != -1){
console.log(elems[i]);
} else {
validate(elems[i]);
}
}
function validate(element){
if(element.indexOf('<div') == -1){
return false;
} else if(element.indexOf('<script') == -1){
return false;
} else {
element.innerText = element.innerText.replace("t", "p"); //Add the others as well
}
}

.textContent & .innerText
"So basically I can get all the visible words on the website for user without any HTML markdown." ✱
✱Upper case and grammatical corrections are mine
Text can be extracted from HTML easily just by using .textContent or .innerText properties. There are some significant differences between results and minor inconsistency of standards, see links above and demo below.
Demo
Run the demo and click the Results link or scroll to the very bottom
var content = document.getElementById('content');
var tC = document.getElementById('textContent');
tC.textContent = content.textContent;
var iT = document.getElementById('innerText');
iT.innerText = content.innerText;
<!DOCTYPE html>
<html>
<head>
<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.2.1/css/bootstrap.min.css" rel="stylesheet">
<style>
html {
scroll-behavior: smooth
}
</style>
</head>
<body>
<div id='content' class='container'>
<header id='top' class='container'>
<hgroup class='row'>
<h1>Home</h1>
</hgroup>
<nav class='row'>
<ul class='nav col-12'>
<li class='p-2'><a href='#a0'>Section 1</a></li>
<li class='p-2'><a href='#a1'>Section 2</a></li>
<li class='p-2'><a href='#a2'>Section 3</a></li>
<li class='p-2'><a href='#a3'>Article</a></li>
<li class='p-2'><a href='#a4'>Results</a></li>
</ul>
</nav>
</header>
<hr>
<main class='container'>
<section id='a0' class='row'>
<article class='col-12'>
<h2>Section I</h2>
<p>Lorem ipsum dolor sit amet, eos nonumy omittam ex. No dicant tibique accusamus pri, sed omnis posidonium ad. In sea dico honestatis, ex repudiare reprimique delicatissimi mea. Sit dicta moderatius ad, natum convenire usu ei. Est no graece laboramus
deterruisset. </p>
</article>
</section>
<section id='a1' class='row'>
<article class='col-12'>
<h2>Section II</h2>
<p>Mundi nemore iisque in nec. An dolorum intellegat conclusionemque eos, ad labore omittam mel. Te nam wisi omittam patrioque, oporteat honestatis intellegebat cu mei. Odio cibo omittantur te sed.</p>
</article>
</section>
<section id='a2' class='row'>
<article class='col-12'>
<h2>Section III</h2>
<p>Alii commodo ne sea, eu pro legimus signiferumque. At mei nisl facete adolescens, et mel eleifend voluptatibus. Qui ei wisi sonet noster, est solum posidonium scribentur et, sea nobis verear ut. Nemore admodum usu ne.</p>
</article>
</section>
<hr>
<section id='a3' class='row'>
<article class='col-12'>
<h2>Article</h2>
<p>Lorem ipsum dolor sit amet, quot erroribus voluptatum in pri. Fabulas vocibus insolens his ex. Vide laboramus ius et, at sit adhuc doctus luptatum, et sit dicat inani democritum. His liber blandit pericula id, an fugit reformidans neglegentur
cum. Indoctum intellegat et pro, sed fabulas ocurreret eu. Nam ut fabulas inciderint, iracundia conceptam ne vix, quo offendit inimicus torquatos in.</p>
<div class='row'>
<aside class='col-4 float-left'>
<blockquote>
<p>Duo illum assum discere ne, sed cu posse alterum accusam. Cum an error pertinacia, aperiam deleniti</p>
</blockquote>
</aside>
<p class='col-8'>Ut has elit labores, ex animal delectus efficiendi eos. Id soleat accusamus mel, sint deterruisset his an. Civibus fabellas interpretaris vis ea, dicat aperiri nec ut. Et posidonium dissentias ius, essent quodsi no nam. Mei graece prompta
quaestio et, pri no voluptua atomorum. Pri id putant graecis. Autem prompta nostrud ut mei, mea ut facilisis expetenda intellegebat.</p>
</div>
<div class='row'>
<p class='col-12'>Quo dolor commune albucius ea, ad novum senserit mediocritatem pro, te nisl quidam intellegam nam. Audire omittam in sea, per veniam noster ne. Duo illum assum discere ne, sed cu posse alterum accusam. Cum an error pertinacia, aperiam deleniti
sedcu. Pri ut facilisi hendrerit reformidans, id qui modus libris deseruisse, cum primis moderatius ut.</p>
</div>
</article>
</section>
</main>
<hr>
<footer class='container'>
<nav class='row'>
<ul class='nav col-12'>
<li><a href='#top'>HOME</a></li>
</ul>
</nav>
</footer>
</div>
<!--End of #content-->
<hr>
<hr>
<section id='a4' class='container'>
<h2>Results</h2>
<div class='container'>
<div class='row'>
<h3><code>textContent</code></h3>
<div id='textContent' class='col-10'></div>
</div>
<hr>
<div class='row'>
<h3><code>innerText</code></h3>
<div id='innerText' class='col-10'></div>
</div>
</div>
</section>
<script>
</script>
</body>
</html>

Your code as you have posted does not call the validate function so I will totally ignore that. Your stated objective is really not super clear however I will put an attempt to loop through some elements with something similar to what you have.
For my code, I add a class to everything that is not skipped; that is where you would do your processing; call your function etc. i.e. el.classList.add("show-processors");
Note:skipList an the function filterBySkipCheck are the key parts here.
function doSomething(el) {
const showplace = document.getElementById('actions-display')
.getElementsByClassName('showme')[0];
showplace.innerText = showplace.innerText + el.innerText;
const textContentOutput = document.getElementById('textContentOutput');
const innerTextOutput = document.getElementById('innerTextOutput');
textContentOutput.innerHTML = el.textContent;
innerTextOutput.innerHTML = el.innerText;
}
function hasParentWithMatchingSelector(target, selector) {
return [...document.querySelectorAll(selector)].some(el =>
el !== target && el.contains(target)
);
}
function hasMatchingSelector(target, selector) {
return [...document.querySelectorAll(selector)].some(el =>
el === target
);
}
function hasClass(element, classname) {
return element.classList.contains(classname);;
}
function hasSelfOrParentWithClass(element, classname) {
if (element.classList.contains(classname)) return true;
return element.parentNode && hasSelfOrParentWithClass(element.parentNode, classname);
}
function hasParentWithClass(element, classname) {
return hasParentWithMatchingSelector(element, '.' + classname);
}
function filterBySkipCheck(el, index, myarr, skipList) {
let isSkipped = false;
// process each item in skip list
skipList.forEach(function(skip) {
if (!isSkipped && skip.matchType === 'tag') {
isSkipped = el.tagName === skip.match;
}
if (!isSkipped && skip.matchType === 'skipclass') {
isSkipped = hasClass(el, skip.match);
}
if (!isSkipped && skip.matchType === 'selector') {
isSkipped = hasMatchingSelector(el, skip.match);
}
if (!isSkipped && skip.matchType === 'parentselector') {
isSkipped = hasParentWithMatchingSelector(el, skip.match);
}
if (!isSkipped && skip.matchType === 'element') {
isSkipped = el === skip.match;
}
});
return isSkipped;
}
function processAllElements(elements, skipL) {
// filter for stuff to skip
const filteredElements = [...elements].filter(function(el, index, myarr) {
return filterBySkipCheck(el, index, myarr, skipL);
});
// this answers the question, how to process/loop through all but also how to filter
for (let i = 0; i < elements.length; i += 1) {
let el = elements[i];
let isSkipped = filteredElements.includes(elements[i]);
let shouldProcess = !isSkipped;
if (shouldProcess) {
el.classList.add("show-processors");
}
}
}
let skipList = [{
match: "SECTION",
matchType: "tag"
}, {
match: "SCRIPT",
matchType: "tag"
}, {
match: "STYLE",
matchType: "tag"
}, {
match: "skipme-also",
matchType: "skipclass"
}, {
match: ".skipme",
matchType: "selector"
}, {
match: ".skipme",
matchType: "parentselector"
}, {
match: document.getElementById('second-skip'),
matchType: "element"
}];
let elementsInScope = document.body.getElementsByTagName("*");
processAllElements(elementsInScope, skipList);
.show-processors {
border: solid 1px red;
}
.show-skippers {
border: solid 1px green;
}
<script>
var myfriend = "pluto";
</script>
<div>first</div>
<div id='second-skip'>second</div>
<div>nested one
<div>nested inner
<div>nested granchild</div>
</div>
</div>
<div>container for list
<ul>in the list
<li>one</li>
<li>two</li>
<li>three</li>
<li>four</li>
</ul>
</div>
<div>testlink
<button type="button">button</button>
<span>span1</span><span>spanner2</span>
</div>
<section>test section to skip</section>
<div class="skipme-also">I am skipped</div>
<div class="skipme">skip me by class</div>
<div>I contain paragraphs
<p>Happy day</p>
<p>Happy day2</p>
<p>Happy day3</p>after paragraphs
</div>
<div id="actions-display" class="skipme">I just show stuff
<button id="test-button" type="text">Click to test</button>
<div class="showme"></div>
<h3>Result of textContent:</h3>
<textarea id="textContentOutput" rows="6" cols="30" readonly>...</textarea>
<h3>Result of innerText:</h3>
<textarea id="innerTextOutput" rows="6" cols="30" readonly>...</textarea> JavaScript
</div>

Delete an element from the code using jquery

I'm trying Jquery and now I have a problem.
I want to remove an element from my webpage. So, when I press the delete button - the big element must disappear. Using the JQ I have written something like this
$(document).ready(function(){
$(".delete").click(function(){
$(this).parents(".block").animate({ opacity: 'hide' }, "slow");
})
});
It have worked fine until I didn't add subdiv, or answer. And how the application must works now? I press the delete button and it must remove current block.
<div class = "block">
<div class = "postbuttons">
<img src = "img/delete-icon.png" class = "delete"></a>
<img src = "img/edit-icon.png" class = "edit"></a>
</div>
<div class = "postinfo">
<span class = "author">Da Monkey wrote:</span> <span class = "date">on <span>13.13.13</span></span>
</div>
<div class = "post">
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ea, voluptate, unde, impedit iste sint assumenda consequatur ipsum nesciunt</p>
<a class = "answerlink" href = "#">Answer</a>
</div>
<div class = "answer">
<div class = "postbuttons">
<img src = "img/delete-icon.png" class = "delete"></a>
<img src = "img/edit-icon.png" class = "edit"></a>
</div>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Fuga, numquam, culpa, omnis explicabo ut asperiores ipsam porro alias quisquam nisi iste non a maiores! Nulla odio unde dolorum officia vero. </p>
<div class = "answerinfo">
- Macaque on <span>13.13.13</span>
</div>
</div>
If you didn't understand me here the result

Respect to the funcionality:
$(document).ready(function(){
$(".delete").click(function(){
$(this).closest(".block").animate({ opacity: 'hide' }, "slow");
});
});
you should use closest instead of parents because it stop once it has found the first math and parents travels to the root of the dom. Also if you dont need the block anymore you can remove it with the jquery method remove(), after tue animation ended with a callback function.
Also you are missing some semicolons, and tags
$(document).ready(function(){
$(".delete").click(function(){
$(this).parents(".block").animate({ opacity: 'hide' }, "slow");
}) // here needs a semicolon
});
Missing tags
<div class = "block">
<div class = "postbuttons">
<img src = "img/delete-icon.png" class = "delete"></a> <--! missing <a> -->
<img src = "img/edit-icon.png" class = "edit"></a> <--! missing <a> -->
</div>
<div class = "postinfo">
<span class = "author">Da Monkey wrote:</span> <span class = "date">on <span>13.13.13</span></span>
</div>
<div class = "post">
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ea, voluptate, unde, impedit iste sint assumenda consequatur ipsum nesciunt</p>
<a class = "answerlink" href = "#">Answer</a>
</div>
<div class = "answer">
<div class = "postbuttons">
<img src = "img/delete-icon.png" class = "delete"></a> <--! missing <a> -->
<img src = "img/edit-icon.png" class = "edit"></a> <--! missing <a> -->
</div>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Fuga, numquam, culpa, omnis explicabo ut asperiores ipsam porro alias quisquam nisi iste non a maiores! Nulla odio unde dolorum officia vero. </p>
<div class = "answerinfo">
- Macaque on <span>13.13.13</span>
</div>
</div>
I hope I was Useful.

Try hiding the container of the container of the delete button, which will work regardless of its class:
$(document).ready(function(){
$(".delete").click(function(){
$(this).parents(".postbuttons").parent().animate({ opacity: 'hide' }, "slow");
})
});