Develop Reference

Event listener firing numerous time

I have the following code which is firing Event a lot of times and I want it to fire one time each time the modal appears, the gist of the code is to wait for Modal to be a part of DOM after which I run the function hence setTimeout to override the Modal classes. After which I have Event which is firing numerous times.
If I use clearInterval, my CSS isn't applied
setInterval(() => {
if (document.querySelector('[data-test-id="modal"]')) {
poller(['[data-test-id="modal"]'], () => {
let msgNode = document.querySelectorAll('[class*="AvailabilityMessagesstyled__"]');
[...msgNode].forEach((delivery) => {
setTimeout(() => {
if (delivery.children[0].innerText.indexOf("Available") !== -1 ||
delivery.children[0].innerText.indexOf("available") !== -1) {
delivery.children[0].classList.add("TP")
}
if (delivery.children[0].innerText.indexOf("Unavailable") !== -1) {
delivery.children[0].classList.add("TP__red")
}
}, 200)
// qty
let qtyCounter = Array.from(document.querySelectorAll('[data-test-id="qty-selector"]'));
console.log(qtyCounter);
[...qtyCounter].forEach((counter) => {
counter.addEventListener("click", function() {
console.log('clicked')
})
})
});
})
}
}, 2000)
I am not sure what I am doing wrong?

Puppeteer - Click a button only if exists

I'm trying to create a webscraper in Node, using Puppeteer.
My first challange (which I thought would be easy), it's pass by a pagination "Load more" button.
But, when I run the following code, Puppeteer click on all "Load more" and after click on a content, when I need to stop clicking.
Why this happens?
let loadMore = true;
while (loadMore) {
selector = 'ul.pager > li > a.button';
await page.waitForSelector(selector, { timeout: 600 }).then(() => {
page.click(selector);
}).catch(() => {
loadMore = false;
});
}
Thx all!

I would do it like this.
I think timeout doesn't make a difference here, if the await inside the if's condition is not enough then there could be other problem with the script.
let loadMore = true;
while (loadMore) {
const selector = 'ul.pager > li > a.button';
if ((await page.$(selector)) !== null) {
await page.click(selector);
} else {
loadMore = false;
}
}

ScrollIntoView() doesn't work - vanilla JS, why?

My idea is to have a simple search function, where people can type text in a search box and see if there is anything matched with the text in the html. If it does, the matched part(let's say it might be in later half of the whole HTML page that's not seenable on your current screen/viewport) will jump/scroll into view. If it doesn't, you get "no match found" message in the #feedback tag.
HTML looks like this:
<input id="search-text">
<p id="feedback"></p>
<p>title1</p>
<p>title2</p>
<p>title3</p>
JS is like this:
let searchText = ''
const titlesNodes = document.querySelectorAll('p')
const titles = Array.from(titlesNodes)
document.querySelector('#search-text').addEventListener('input', (e) => {
searchText = e.target.value
searchFunction()
})
const searchFunction = () => {
const filteredTitles = titles.filter((title) => title.innerText.toLowerCase().includes(searchText.toLowerCase()) )
const msg = document.querySelector('#feedback')
msg.innerHTML = ''
if (filteredTitles.length > 0){
filteredTitles[0].scrollIntoView()
} else {
msg.textContent = 'No match found'
}
}
So far I'm able to get the "no matched found" but when I type something that's only in the later half of the page, it doesn't jump to the view. I tested on both Chromium and Firefox and I use Linux.
What is wrong with my code? Thanks!

This is because by default, browser will set your <input> element into screen when you type in. So your own call is overridden by browser's default one.
Not sure what's the best way to avoid that though...
You may try to call scrollIntoView after a small timeout, so it occurs after the one of the input. If you use requestAnimationFrame timing function, it should occur just before the next paint, so you shouldn't notice the one of the input occurred.
let searchText = '';
const titlesNodes = document.querySelectorAll('p')
const titles = Array.from(titlesNodes)
document.querySelector('#search-text').addEventListener('input', (e) => {
searchText = e.target.value
searchFunction()
})
const searchFunction = () => {
const filteredTitles = titles.filter((title) => title.innerText.toLowerCase().includes(searchText.toLowerCase()))
const msg = document.querySelector('#feedback')
msg.innerHTML = ''
if (filteredTitles.length > 0) {
requestAnimationFrame(() => { // wait just a bit
filteredTitles[0].scrollIntoView()
});
} else {
msg.textContent = 'No match found'
}
}
#feedback { margin-bottom: 125vh }
p { margin-bottom: 50vh }
<input id="search-text">
<p id="feedback"></p>
<p>title1</p>
<p>title2</p>
<p>title3</p>

Try changing:
- filteredTitles[0].scrollIntoView()
+ filteredTitles[0].scrollIntoView({alignToTop: true})
document.querySelector('#search-text').addEventListener('input', (e) => {
searchText = e.target.value
- searchFunction()
+ setTimeout(searchFunction, 500)})
})

Set time out event on a m() generated element

I have a m("p.help") element which is removed with a click event.
I also want the element to be removed automatically after a few seconds if not clicked. I need to set a time out on it. Setting time out does not work.
function help() {
var text = `This is a service template. Use Service section to set the schedule`;
var node = m("p.help", {
onclick() {
this.parentNode.removeChild(this);
},
}, text);
setTimeout(() => {
if (node.parentNode) {
node.parentNode.removeChild(node);
console.log("removed");
m.redraw();
}
}, 5000);
return node;
}
The click event works fine but the time out does not work. It is not even triggered judging by the console.log()
What am I doing wrong?
EDIT
Thanks ciscoheat for the tip.
I had to put the timer in the controller for this to work.
So this one works fine:
function controller(init) {
this.display = {
help: true
};
setTimeout(() => {
this.display.help = false;
m.redraw();
}, 5000);
}
function view(vm) {
return m(".container", [
(() => {
var text = "Some text";
if (vm.display.help) {
return m("p.memo", {
onclick() {
this.parentNode.removeChild(this);
}
}, text);
}
})(),
]);
}

To use Mithril correctly, you should avoid DOM manipulation, leaving that to Mithril's fast diff algorithm.
Use a state variable instead, related to displaying the help paragraph that will be changed automatically after 5 seconds.
Here's a jsbin showing what I mean: http://jsbin.com/kixece/edit?html,js,output

event for file upload cancel in javascript

We can use file.onchange if we gonna set an event callback for file reading using javascript, but how to set event for when user cancel the upload (close the browse panel)?

There is no API for the file input modal. Besides, if the user closes the browser your code won't be running anymore, will it?
Of course there is the window.onunload method which allows you to detect the example you give.
Per the comments, the best thing I can come up with that would be helpful is that if nothing is selected, file.value.length will be 0.

That’s a great solution:
const createUpload = () => {
let lock = false
return new Promise((resolve, reject) => {
const el = document.createElement('input');
el.id = +new Date();
el.style.display = 'none';
el.setAttribute('type', 'file');
document.body.appendChild(el)
el.addEventListener('change', () => {
lock = true;
const file = el.files[0];
resolve(file)
document.body.removeChild(document.getElementById(el.id));
}, { once: true })
window.addEventListener('focus', () => { // file blur
setTimeout(() => {
if (!lock && document.getElementById(el.id)) {
reject(new Error('onblur'))
document.body.removeChild(document.getElementById(el.id))
}
}, 300)
}, { once: true })
el.click() // open file select box
})
}
Ussage:
// $label.classList.add('loading');
createUpload()
.then(function (file) {
// Sent file
// $label.classList.remove('loading');
})
.catch(function (err) {
// Your Cancel Event
// $label.classList.remove('loading');
});

It is very simple with jQuery :
$("#fileInputId").change(function () {
//implement your code here
});