Continuing a javascript after using .click() on a button which adds new DOM elements
I am a lowly operations employee without authorization to change the programs and permissions on my machine, and I would like to automate some highly repetitive data entry. I know there are a lot of programs that can do that, however, for the sake of this discussion we'll assume that I'm not allowed to have any of them and I can only script through the debug F12 menu in Chrome. I also probably don't understand half of these words as well as I should.
I have to run test cases on a third-party vendor's highly dynamic website, and I've already successfully written javascript which adds texts to elements in the DOM and presses the "next" button.
The problem is, upon .click()ing the "next" button, it takes time for the page to update, and the update creates new elements which weren't in the DOM when the script was initialized. I need to find a way to delay the execution of the script until the DOM contains all the elements I need to update.
As a really, really crude proof of concept I wrote the pre-filler for each page as a function, and I serially called each function at the end of the previous function, using setTimeout(nextfunct, 10000) to let the page update before executing the next line. (I was going to refine that by trying to create some kind of object listener instead of an arbitrary 10 second delay, but I wasn't even able to get that far.) This approach creates two errors.
1) The script seems to be checking whether the elements are on the DOM before the end of the setTimeout(), so it still gives me an error. If nextfunct is defined as
document.getElementById("doesntexistyet").value = "Fill Me";
console.log("nextfunct ran");
I will get the error message stating there is no element with the id "doesntexistyet" immediately, not after a delay of 10 seconds. The element on the next page will not update.
2) The DOM updating interrupts my script. In the above code, the console output will not ever appear in my console. If I comment out the missing element, so the function only prints a comment, it will still not appear in my console. However, if I comment out the code and I switch the setTimeout to 1ms, "nextfunct ran" will appear in my console, until the page updates, at which time the console will be deleted.
Are there ways around this which I can implement using only vanilla JS and a browser? I'm sure there's a keyword I can search for where someone has discussed this before, but it seems like the vast majority of JS autofilling discussions are oriented towards people designing code to be integrated into a website,
Thanks
javascript html
edited Jan 18 at 23:36
Matthew Herbst
10.6k134687
asked Jan 18 at 23:24
T ShawT Shaw
62
|
show 5 more comments
I am a lowly operations employee without authorization to change the programs and permissions on my machine, and I would like to automate some highly repetitive data entry. I know there are a lot of programs that can do that, however, for the sake of this discussion we'll assume that I'm not allowed to have any of them and I can only script through the debug F12 menu in Chrome. I also probably don't understand half of these words as well as I should.
I have to run test cases on a third-party vendor's highly dynamic website, and I've already successfully written javascript which adds texts to elements in the DOM and presses the "next" button.
The problem is, upon .click()ing the "next" button, it takes time for the page to update, and the update creates new elements which weren't in the DOM when the script was initialized. I need to find a way to delay the execution of the script until the DOM contains all the elements I need to update.
As a really, really crude proof of concept I wrote the pre-filler for each page as a function, and I serially called each function at the end of the previous function, using setTimeout(nextfunct, 10000) to let the page update before executing the next line. (I was going to refine that by trying to create some kind of object listener instead of an arbitrary 10 second delay, but I wasn't even able to get that far.) This approach creates two errors.
1) The script seems to be checking whether the elements are on the DOM before the end of the setTimeout(), so it still gives me an error. If nextfunct is defined as
document.getElementById("doesntexistyet").value = "Fill Me";
console.log("nextfunct ran");
I will get the error message stating there is no element with the id "doesntexistyet" immediately, not after a delay of 10 seconds. The element on the next page will not update.
2) The DOM updating interrupts my script. In the above code, the console output will not ever appear in my console. If I comment out the missing element, so the function only prints a comment, it will still not appear in my console. However, if I comment out the code and I switch the setTimeout to 1ms, "nextfunct ran" will appear in my console, until the page updates, at which time the console will be deleted.
Are there ways around this which I can implement using only vanilla JS and a browser? I'm sure there's a keyword I can search for where someone has discussed this before, but it seems like the vast majority of JS autofilling discussions are oriented towards people designing code to be integrated into a website,
Thanks
javascript html
edited Jan 18 at 23:36
Matthew Herbst
10.6k134687
asked Jan 18 at 23:24
T ShawT Shaw
62
1
The DOM updating interrupts my script. In the above code, the console output will not ever appear in my console.It sounds like the entire page is being replaced (eg navigation to a new URL) if the previous Javascript in a timeout no longer runs, is this the case?
– CertainPerformance
Jan 18 at 23:27
The URL is the same, although it ends in .aspx and I'm not sure how that'll impact things.
– T Shaw
Jan 18 at 23:32
The page can be replaced even if the URL is the same, can you check whether that's happening?
– CertainPerformance
Jan 18 at 23:33
Certainly, but that's a new concept for me. What's the best way to see?
– T Shaw
Jan 18 at 23:42
eg, open the console, type something in and press enter, then wait until the UI changes. If the message you typed before is gone, the page has been replaced.
– CertainPerformance
Jan 18 at 23:43
|
show 5 more comments
I am a lowly operations employee without authorization to change the programs and permissions on my machine, and I would like to automate some highly repetitive data entry. I know there are a lot of programs that can do that, however, for the sake of this discussion we'll assume that I'm not allowed to have any of them and I can only script through the debug F12 menu in Chrome. I also probably don't understand half of these words as well as I should.
I have to run test cases on a third-party vendor's highly dynamic website, and I've already successfully written javascript which adds texts to elements in the DOM and presses the "next" button.
The problem is, upon .click()ing the "next" button, it takes time for the page to update, and the update creates new elements which weren't in the DOM when the script was initialized. I need to find a way to delay the execution of the script until the DOM contains all the elements I need to update.
As a really, really crude proof of concept I wrote the pre-filler for each page as a function, and I serially called each function at the end of the previous function, using setTimeout(nextfunct, 10000) to let the page update before executing the next line. (I was going to refine that by trying to create some kind of object listener instead of an arbitrary 10 second delay, but I wasn't even able to get that far.) This approach creates two errors.
1) The script seems to be checking whether the elements are on the DOM before the end of the setTimeout(), so it still gives me an error. If nextfunct is defined as
document.getElementById("doesntexistyet").value = "Fill Me";
console.log("nextfunct ran");
I will get the error message stating there is no element with the id "doesntexistyet" immediately, not after a delay of 10 seconds. The element on the next page will not update.
2) The DOM updating interrupts my script. In the above code, the console output will not ever appear in my console. If I comment out the missing element, so the function only prints a comment, it will still not appear in my console. However, if I comment out the code and I switch the setTimeout to 1ms, "nextfunct ran" will appear in my console, until the page updates, at which time the console will be deleted.
Are there ways around this which I can implement using only vanilla JS and a browser? I'm sure there's a keyword I can search for where someone has discussed this before, but it seems like the vast majority of JS autofilling discussions are oriented towards people designing code to be integrated into a website,
Thanks
javascript html
edited Jan 18 at 23:36
Matthew Herbst
10.6k134687
asked Jan 18 at 23:24
T ShawT Shaw
62
I am a lowly operations employee without authorization to change the programs and permissions on my machine, and I would like to automate some highly repetitive data entry. I know there are a lot of programs that can do that, however, for the sake of this discussion we'll assume that I'm not allowed to have any of them and I can only script through the debug F12 menu in Chrome. I also probably don't understand half of these words as well as I should.
I have to run test cases on a third-party vendor's highly dynamic website, and I've already successfully written javascript which adds texts to elements in the DOM and presses the "next" button.
The problem is, upon .click()ing the "next" button, it takes time for the page to update, and the update creates new elements which weren't in the DOM when the script was initialized. I need to find a way to delay the execution of the script until the DOM contains all the elements I need to update.
As a really, really crude proof of concept I wrote the pre-filler for each page as a function, and I serially called each function at the end of the previous function, using setTimeout(nextfunct, 10000) to let the page update before executing the next line. (I was going to refine that by trying to create some kind of object listener instead of an arbitrary 10 second delay, but I wasn't even able to get that far.) This approach creates two errors.
1) The script seems to be checking whether the elements are on the DOM before the end of the setTimeout(), so it still gives me an error. If nextfunct is defined as
document.getElementById("doesntexistyet").value = "Fill Me";
console.log("nextfunct ran");
I will get the error message stating there is no element with the id "doesntexistyet" immediately, not after a delay of 10 seconds. The element on the next page will not update.
2) The DOM updating interrupts my script. In the above code, the console output will not ever appear in my console. If I comment out the missing element, so the function only prints a comment, it will still not appear in my console. However, if I comment out the code and I switch the setTimeout to 1ms, "nextfunct ran" will appear in my console, until the page updates, at which time the console will be deleted.
Are there ways around this which I can implement using only vanilla JS and a browser? I'm sure there's a keyword I can search for where someone has discussed this before, but it seems like the vast majority of JS autofilling discussions are oriented towards people designing code to be integrated into a website,
Thanks
javascript html
javascript html
edited Jan 18 at 23:36
Matthew Herbst
10.6k134687
asked Jan 18 at 23:24
T ShawT Shaw
62
edited Jan 18 at 23:36
Matthew Herbst
10.6k134687
asked Jan 18 at 23:24
T ShawT Shaw
62
edited Jan 18 at 23:36
Matthew Herbst
10.6k134687
edited Jan 18 at 23:36
Matthew Herbst
10.6k134687
edited Jan 18 at 23:36
Matthew Herbst
10.6k134687
10.6k134687
asked Jan 18 at 23:24
T ShawT Shaw
62
asked Jan 18 at 23:24
T ShawT Shaw
62
asked Jan 18 at 23:24
T ShawT Shaw
62
62
1
The DOM updating interrupts my script. In the above code, the console output will not ever appear in my console.It sounds like the entire page is being replaced (eg navigation to a new URL) if the previous Javascript in a timeout no longer runs, is this the case?
– CertainPerformance
Jan 18 at 23:27
The URL is the same, although it ends in .aspx and I'm not sure how that'll impact things.
– T Shaw
Jan 18 at 23:32
The page can be replaced even if the URL is the same, can you check whether that's happening?
– CertainPerformance
Jan 18 at 23:33
Certainly, but that's a new concept for me. What's the best way to see?
– T Shaw
Jan 18 at 23:42
eg, open the console, type something in and press enter, then wait until the UI changes. If the message you typed before is gone, the page has been replaced.
– CertainPerformance
Jan 18 at 23:43
|
show 5 more comments
1
The DOM updating interrupts my script. In the above code, the console output will not ever appear in my console.It sounds like the entire page is being replaced (eg navigation to a new URL) if the previous Javascript in a timeout no longer runs, is this the case?
– CertainPerformance
Jan 18 at 23:27
The URL is the same, although it ends in .aspx and I'm not sure how that'll impact things.
– T Shaw
Jan 18 at 23:32
The page can be replaced even if the URL is the same, can you check whether that's happening?
– CertainPerformance
Jan 18 at 23:33
Certainly, but that's a new concept for me. What's the best way to see?
– T Shaw
Jan 18 at 23:42
eg, open the console, type something in and press enter, then wait until the UI changes. If the message you typed before is gone, the page has been replaced.
– CertainPerformance
Jan 18 at 23:43
1
1
The DOM updating interrupts my script. In the above code, the console output will not ever appear in my console. It sounds like the entire page is being replaced (eg navigation to a new URL) if the previous Javascript in a timeout no longer runs, is this the case?– CertainPerformance
Jan 18 at 23:27
The DOM updating interrupts my script. In the above code, the console output will not ever appear in my console. It sounds like the entire page is being replaced (eg navigation to a new URL) if the previous Javascript in a timeout no longer runs, is this the case?– CertainPerformance
Jan 18 at 23:27
The URL is the same, although it ends in .aspx and I'm not sure how that'll impact things.
– T Shaw
Jan 18 at 23:32
The URL is the same, although it ends in .aspx and I'm not sure how that'll impact things.
– T Shaw
Jan 18 at 23:32
The page can be replaced even if the URL is the same, can you check whether that's happening?
– CertainPerformance
Jan 18 at 23:33
The page can be replaced even if the URL is the same, can you check whether that's happening?
– CertainPerformance
Jan 18 at 23:33
Certainly, but that's a new concept for me. What's the best way to see?
– T Shaw
Jan 18 at 23:42
Certainly, but that's a new concept for me. What's the best way to see?
– T Shaw
Jan 18 at 23:42
eg, open the console, type something in and press enter, then wait until the UI changes. If the message you typed before is gone, the page has been replaced.
– CertainPerformance
Jan 18 at 23:43
eg, open the console, type something in and press enter, then wait until the UI changes. If the message you typed before is gone, the page has been replaced.
– CertainPerformance
Jan 18 at 23:43
|
show 5 more comments
0
active
oldest
votes
Your Answer
StackExchange.ifUsing("editor", function () {
StackExchange.using("externalEditor", function () {
StackExchange.using("snippets", function () {
StackExchange.snippets.init();
});
});
}, "code-snippets");
StackExchange.ready(function() {
var channelOptions = {
tags: "".split(" "),
id: "1"
};
initTagRenderer("".split(" "), "".split(" "), channelOptions);
StackExchange.using("externalEditor", function() {
// Have to fire editor after snippets, if snippets enabled
if (StackExchange.settings.snippets.snippetsEnabled) {
StackExchange.using("snippets", function() {
createEditor();
});
}
else {
createEditor();
}
});
function createEditor() {
StackExchange.prepareEditor({
heartbeatType: 'answer',
autoActivateHeartbeat: false,
convertImagesToLinks: true,
noModals: true,
showLowRepImageUploadWarning: true,
reputationToPostImages: 10,
bindNavPrevention: true,
postfix: "",
imageUploader: {
brandingHtml: "Powered by u003ca class="icon-imgur-white" href="https://imgur.com/"u003eu003c/au003e",
contentPolicyHtml: "User contributions licensed under u003ca href="https://creativecommons.org/licenses/by-sa/3.0/"u003ecc by-sa 3.0 with attribution requiredu003c/au003e u003ca href="https://stackoverflow.com/legal/content-policy"u003e(content policy)u003c/au003e",
allowUrls: true
},
onDemand: true,
discardSelector: ".discard-answer"
,immediatelyShowMarkdownHelp:true
});
}
});
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
StackExchange.ready(
function () {
StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f54262675%2fcontinuing-a-javascript-after-using-click-on-a-button-which-adds-new-dom-elem%23new-answer', 'question_page');
}
);
Post as a guest
Required, but never shown
0
active
oldest
votes
0
active
oldest
votes
active
oldest
votes
active
oldest
votes
Thanks for contributing an answer to Stack Overflow!
- Please be sure to answer the question. Provide details and share your research!
But avoid …
- Asking for help, clarification, or responding to other answers.
- Making statements based on opinion; back them up with references or personal experience.
To learn more, see our tips on writing great answers.
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
StackExchange.ready(
function () {
StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f54262675%2fcontinuing-a-javascript-after-using-click-on-a-button-which-adds-new-dom-elem%23new-answer', 'question_page');
}
);
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
1
The DOM updating interrupts my script. In the above code, the console output will not ever appear in my console.It sounds like the entire page is being replaced (eg navigation to a new URL) if the previous Javascript in a timeout no longer runs, is this the case?– CertainPerformance
Jan 18 at 23:27
The URL is the same, although it ends in .aspx and I'm not sure how that'll impact things.
– T Shaw
Jan 18 at 23:32
The page can be replaced even if the URL is the same, can you check whether that's happening?
– CertainPerformance
Jan 18 at 23:33
Certainly, but that's a new concept for me. What's the best way to see?
– T Shaw
Jan 18 at 23:42
eg, open the console, type something in and press enter, then wait until the UI changes. If the message you typed before is gone, the page has been replaced.
– CertainPerformance
Jan 18 at 23:43