In the snippet below, if you click on Button One, the script listens for that click, and if you're on a Chrome browser, the script will programmatically click on Button Two, and then pass a message to the console. This all works.
With each click on Button One, I'm seeing each console message doubled from the previous one... It's almost as though clicking on Button One increases the number of clicks on Button Two.
This question is two fold:
Why does the first click on Button One not return any console message?
How do I click on Button One and have it return only one click on Button Two?
let chromeCheck = /Chrome/.test(navigator.userAgent) && /Google Inc/.test(navigator.vendor);
one.addEventListener('click', function() {
if (chromeCheck) {
(function playVideo() {
document.getElementById('two').click();
two.addEventListener('click', function() {
console.log('Button two was clicked');
})
})();
} else {
console.log('Button two was not clicked.')
}
})<button class="button" id="one">Button One</button>
<button class="button" id="two">Button Two</button>You got your order messed up a bit.
First of all, you are clicking the button programatically before you add the event listener to button two. Therefore, you will not get a console log on the very first click.
Second, you are attaching an event listener to button two on every click of button one. So everytime you click button one, another console log will be attached to button two. To avoid that, just add the event listener for button two outside the click listener for button one.
let chromeCheck = /Chrome/.test(navigator.userAgent) && /Google Inc/.test(navigator.vendor);
if (chromeCheck) {
two.addEventListener('click', function() {
console.log('Button two was clicked');
})
}
one.addEventListener('click', function() {
if (chromeCheck) {
document.getElementById('two').click();
} else {
console.log('Button two was not clicked.')
}
})<button class="button" id="one">Button One</button>
<button class="button" id="two">Button Two</button>