We Keep Coding

JavaScript - getElementById doesn't work on specific page

I want to automate clicking the agree button to Google's cookie policies.
(I clean cookies after closing a tab, and I don't want to create a google account, so I get asked every time I use google)
There is a div element with the ID "introAgreeButton" that I'm trying to access with my script:
<div role="button" id="introAgreeButton" [...]></div>
However, document.getElementById('introAgreeButton') always returns null.
My first thought was that the element wasn't loaded by the time my function was executed. But it doesn't work if I execute it on window.onload, or even if I run it in a loop until the element is definitely there:
window.onload = function() {
var x = document.getElementById('introAgreeButton')
console.log(x)
}
Output:
null
function loop() {
var x = document.getElementById('introAgreeButton')
if (x) {
console.log('success')
} else {
loop()
}
}
Output:
null
null
null
...
Can be tested on https://www.google.com/search?hl=en&q=test
Anyone have an idea why this is and how to solve it?
Edit: I execute the script via the browser extension TamperMonkey

You can use setInterval to check if element is rendered in DOM like this :
document.addEventListener('DOMContentLoaded', function () {
var intervalID = null;
function checkElementInDOM () {
var element = document.getElementById('introAgreeButton');
if (element) {
clearInterval(intervalID);
// DO YOUR STUFF HERE ...
}
}
intervalID = setInterval(checkElementInDOM, 100);
});
To be used intelligently, however, so as not to have a setInterval which works continuously. Maybe think about adding a maximum number of attempts.

Boolean statement not evaluating in javascript

I'm writing a script, and there are two boolean statements that are very similar but giving different results, and I don't see why they conflict with one another.
My function looks like this:
SCRIPT:
(function() {
window.onload = function() {
let stopped = true;
let button = document.getElementById("start-stop");
if (stopped) {
setInterval(function() {
console.log("The timer is working.");
}, 1000);
}
button.addEventListener('click', function(){
if (stopped) {
stopped = false;
console.log(stopped);
} else {
stopped = true;
console.log(stopped);
}
});
}
}
}).call(this);
The basic idea is that when I push the button the setInterval function stops, however it keeps on going even when the if/else function switches stopped to false.
For example, my console.log looks like this:
I.e. stopped = false, but setInterval doesn't terminate.
Why is this not evaluating correctly?

The problem with your code is that you are trying to work on a piece of code that has already started to operate. In simpler words, the setInterval method will be called every 1000ms, no matter what the value of stopped variable is. If you wish to really stop the log, you can do any of these:
clearInterval()
to completely remove the interval or
setInterval(function() {
if (stopped) {
console.log("The timer is working.");
}
}, 1000);
to check if the value of stopped variable has changed or not (after the click) and act accordingly. Choose either of these for your purpose..

you are calling setinterval even before button is clicked .As the event is already triggered you cannot stop just by setting the variable to false ,you need to clear the interval using clearinterval
check the following snippet
var intervalId;
window.onload = function() {
let stopped = true;
let button = document.getElementById("start-stop");
var Interval_id;
button.addEventListener('click', function() {
if (stopped) {
Interval_id = callTimeout();
stopped = false;
} else {
clearInterval(Interval_id);
stopped = true;
}
});
}
function callTimeout() {
intervalId = setInterval(function() {
console.log("The timer is working.");
}, 1000);
return intervalId;
}
<input type="button" id="start-stop" value="click it">
Hope it helps

Put the if(stopped) statement inside the setInterval function because if you used this function once it will keep going..
Another way to stop setInterval function is by using clearInterval, like this
var intervalId = setInterval(function() { /* code here */}, 1000)
// And whenever you want to stop it
clearInterval(intervalId);

When you click the button stopped variable becomes false but the setInterval will not stop because the setInterval code is already executed.. it will not execute again on button click. And if you reload the page what will happen is that stopped variable will be again set to true as you have written at first line and setInterval will execute again ..
Now What you can do is store setInterval in a variable like this
var timer = setInterval(function,1000);
and then when you click the button use this method to clear interval
clearInterval(timer);
this should do the trick .. Hope it helps ..

How do I make this javascript async while loop work?

I'm attempting to get a google gpt tag to refresh a maximum number of times if, when loaded, it comes back empty.
<script type="text/javascript">
googletag.cmd.push(function() {
var slot1 = googletag.defineSlot("/gtpConfigStuff",[300,600],"gtpConfigStuff")
.addService(googletag.pubads())
.setTargeting("pos", "BTF")
.setTargeting("URL", encodeURIComponent(window.location));
googletag.enableServices();
googletag.display("gtpConfigStuff");
googletag.pubads().addEventListener('slotRenderEnded', function(event) {
var tries = 0;
while (tries<=2 && event.isEmpty==true) {
//googletag.pubads().refresh([slot1]);
//setTimeout(function() {
tries++;
console.log(tries);
//}, 1000);
}
console.log("done");
});
});
</script>
With the above lines commented out it works as it should.
With the refresh function call it will loop indefinitely.
The setTimeout I thought might allow the refresh to finish.
Thanks.

Your script will load indefinitely because you're resetting your tries variable indefinitely
var tries = 0; // Set your variable here...
googletag.pubads().addEventListener('slotRenderEnded', function(event) {
// ...and not here. Otherwise it will always reset to 0 when the event triggers.
// "tries" will still be available in here though as a closure so you can still use it
if (tries<=2 && event.isEmpty==true) {
googletag.pubads().refresh([slot1]);
tries++;
}
});

how can I rearrange this code so my setInterval stops looping infinitely?

I'm trying to make a simple flip-card/memory match (like from super mario brothers 3) game in HTML/Javascript and am having a slight issue with the setInterval command.
Here is a link to the full code: http://jsfiddle.net/msfZj/
Here is the main issue/main logic of it:
if(click == 2) //denotes two cards being clicked
{
if(flippedArray[1].src === flippedArray[0].src) // if click 1 == click 2 then refer to function 'delayMatch' which sets click 1 and 2 cards to not be displayed
{
window.setInterval(function() { delayMatch() }, 500);
console.log("EQUAL");
}
else
{
window.setInterval(function() { delayNoMatch() }, 500); // if click 1 != click 2 then display card.png
console.log("NOT EQUAL");
}
function delayMatch() //function for matching pairs
{
flippedArray[0].style = "display:none;";
flippedArray[1].style = "display:none;";
}
function delayNoMatch() //function for non-matching pairs
{
flippedArray[0].src = "card.png";
flippedArray[1].src = "card.png";
}
click = 0; // when clicked two cards set click back to zero
}
The first two cards I click on always work: but from that point onward the setInterval keeps running the function over and over again in an endless loop every 500ms.
I'd be extremely appreciative if anybody can point my in the right direction on how I can do this properly.
Thank you very much for your time.

It looks like you need setTimeout, which only runs once?
window.setTimeout(function() { delayMatch() }, 500);
Otherwise, you need to clear the interval with clearInterval(i), but first set "i" using the return value of setInterval:
var i = window.setInterval(function() { delayMatch() }, 500);
Here's a demo (I JQuerified it a bit for JSFiddle).

You're going to want to go with setTimeout() instead of setInterval()
A handy function when you use setTimeout is clearTimeout. Say you want to set a timer, but maybe want a button to cancel
var timer = setTimeout(fn,1000);
//later maybe
clearTimeout(timer);

Updating textarea

I've seen this problem asked before, but all the suggestions I've tried as well as some experimentation on my own have failed.
If I run the following code using Javascript, the textarea will display only the last value of i (5). If I use the alert that is commented out, then it works.
I've tried using timeout, invterval, date and time delays and even loops to delay processing but none works unless I use an alert as used in the code below when not commented out. I know some delays still allow processing to continue. I've also tried passing variables to other functions to display in the textarea from there since it appears the textarea displays the last value after exiting the function.
Any suggestions how I can get the textarea to update with each iteration so the numbers 1 through 5 are displayed one at a time?
And I'm curious why the alert will work when other methods of pausing the action won't.
Thanks.
function Go(){
var i = 0;
for(i=0; i<6; i++){
alert("This allows textarea to update with each iteration");
document.getElementById("ta").value = "";
document.getElementById("ta").value = i;
}
}
<textarea id="ta" name="display" rows="15" cols="50"></textarea>
<br /><INPUT TYPE="button" VALUE="START" onClick="Go()">

Here's another possible example using recursion:
function Go(counter){
if (counter > 5){
return;
} else {
document.getElementById("ta").value = counter;
window.setTimeout(function(){ Go(++counter) }, 500);
}
};
Go(1);
If you just passed your function as the callback to a timer, the timer would have waited the specified duration, then executed the function - which runs through all the iterations without any delays between. You have to wait between function calls (or iterations) to see the number increase. Hope that helps :)

Here is an example using scope and setTimeout
function Go(){
var i = 0,
fn = function () {
if (i >= 6) return;
document.getElementById("ta").value = i;
++i;
window.setTimeout(fn, 500);
};
fn();
}

If you want to display the numbers one at a time, use a simple interval function, then clear it when you're done:
var interval = setInterval(function() {
var textArea = document.getElementById("ta");
var currentVal = textArea.value || -1;
currentVal == 5 ? clearInterval(interval) : textArea.value = ++currentVal;
}, 2000);
And your onClick: onClick="interval">
Demo: http://jsfiddle.net/at4aX/

Some of those other methods actually spawn background threads so that forward processes can continue unabated. You need something that will pause the run until the specified time is up, or alternatively run as an event-driven mechanism.
window.setTimeout() works great for this. I used jquery to locate the objects, and wait for domready in my example. You're under no obligation to do this, I just find it easier. Fiddle here.
$(function() {
var iterations = 6;
var burndown = function() {
var value = $("#fooinput").val() - 1;
$("#fooinput").val(value);
if( value > 0) {
window.setTimeout(burndown,1000);
} else {
$("#clickme").removeAttr("disabled");
}
}
$("#clickme").click(function() {
$("#clickme").attr("disabled","true");
$("#fooinput").val(iterations);
window.setTimeout(burndown,1000);
});
});

Thanks for all your answers. I should have checked in earlier. Spent all day on this.
I'm new at Javascript and did come up with something that works on my own but it ain't
pretty. I want to learn to use Javascript correctly so I'll look over your
responses and compare. Seems I should be able to consolidate the functions I came up
with below or just learn from your suggestions posted here. I guess I should become
familiar with jquery, Ajax, etc. as I saw that used a lot in my searching for an
answer.
<body>
<textarea id="ta" name="testinput" rows="15" cols="50"></textarea>
</body>
<script language="javascript" type="text/javascript">
var i = 0;
document.getElementById('ta').innerHTML = i;
setTimeout(Test1, 3000);
function Test1(){
i++;
document.getElementById('ta').innerHTML = i;
if(i<4){ //TEXTAREA WILL STOP AT 5
setTimeout(Test2, 3000);
}
}
function Test2(){
i++;
document.getElementById('ta').innerHTML = i;
setTimeout(Test1, 3000);
}
</script>