The javascript task sequences

Question

0.00/5 (No votes)

See more:

I'm trying to scrab data from a source website and organised the data. The source website page have some tabs , when I click different tabs, there would be different contents displayed. Now I'm using javascript to simulate this procedure. I'm not familiar with javascript, I'm getting stuck with the executing sequence of the code.

What I have tried:

here is my code:

JavaScript

var match=[];
var items=document.querySelectorAll('.date-list-swiper-slide');
for(let i of items) {
    i.querySelector('.slide-item-wrap').click();
    document.querySelectorAll('.item').forEach(function(item,i) {
        var time=item.querySelector('.time-t').innerText;
        var area_A=item.querySelector('.origin-area').innerText;
        var area_B=item.querySelectorAll('.origin-area')[2].innerText;
        var item={time:time,area_a:area_A,area_b:area_B};
        match.push(item);
    });
}
console.log(match);

The output just repeat the first tab-click content, and the webpage has switch ed to the last tab-click content.
It looks like the code

JavaScript

document.querySelectorAll('.item')

" DOES NOT wait the code

JavaScript

i.querySelector('.slide-item-wrap').click()

done and executed the following codes directlly.

What should I do to control following code after the click event has been done?

Posted 15-Jul-23 16:50pm

Yount_0701

Add a Solution

Comments

Member 15627495 16-Jul-23 2:26am

Hello,

do you know if the 'items' collection is full of all datas ? check your var for their contents.

a loop is very fast, if an 'ajax query' happens in the 'target page' ( firing at each tabs click ) , assume it could bypass your aim.

That makes your script catching only the 'first content' [ page 'onload' state , the document is ready ] ,
then the last [ your loop speed avoid all the 'in-middle parts' ]

by using Time feature, you can delay all the 'content loading' happening by your script ( and maybe Ajax answer )

in JavaScript for Time delay resources, you have :
setTimeOut()
here : https://developer.mozilla.org/en-US/docs/Web/API/setTimeout


var match=[];
var items=document.querySelectorAll('.date-list-swiper-slide');

console.table(items);

for(let i of items) {

    i.querySelector('.slide-item-wrap').click();
    
    document.querySelectorAll('.item').forEach(function(item,i) {
      // without let or var, because of 'void' is equal 'let'            
      match.push({time:item.querySelector('.time-t').innerText,area_a:item.querySelector('.origin-area').innerText,area_b:item.querySelectorAll('.origin-area')[2].innerText});

    });
}
console.log(match);
console.table(match);

Yount_0701 16-Jul-23 4:08am

you're right. "i.querySelector('.slide-item-wrap').click();" doesn't go well.
After I put await before this line, everything OK.

Andre Oosthuizen 16-Jul-23 4:23am

@Member 15627495, please post this as the solution, thanks.

Add your solution here

Treat my content as plain text, not as HTML

Preview 0

…

Existing Members

Sign in to your account

...or Join us

Download, Vote, Comment, Publish.

Your Email
Password
Forgot your password?

Your Email
This email is in use. Do you need your password?
Optional Password

I have read and agree to the Terms of Service and Privacy Policy
Please subscribe me to the CodeProject newsletters

When answering a question please:

Read the question carefully.
Understand that English isn't everyone's first language so be lenient of bad spelling and grammar.
If a question is poorly phrased then either ask for clarification, ignore it, or edit the question and fix the problem. Insults are not welcome.
Don't tell someone to read the manual. Chances are they have and don't get it. Provide an answer or move on to the next question.

Let's work to help developers, not make them feel stupid.

This content, along with any associated source code and files, is licensed under The Code Project Open License (CPOL)