Issue
I'm new to javascript and I've been trying for an hour to select this from a web app:
<button type="button" class="zp-button zp_zUY3r zp_B5hnZ zp_rhXT_ zp_FVbJk finder-select-multiple-entities-button" fdprocessedid="jowqnd"><div class="zp_kxUTD" data-elem="button-label"><div class="zp_fwjCX" data-input="checkbox" data-cy-status="unchecked"></div></div><i class="zp-icon apollo-icon apollo-icon-caret-down-small zp_dZ0gM zp_j49HX zp_sGyhf"></i></button>
I've been trying to select it by the "zp_FVbJk" class.
const dropdownSelector = 'zp_FVbJk'
// Handles button and has to be the same in popup.js and content.js until I find a better solution
function sharedTempHandleButton() {
console.log("sharedTempHandleButton() started.");
let buttonToClick;
buttonToClick = document.getElementsByClassName(dropdownSelector)[0];
console.log(buttonToClick)
if (buttonToClick) {
console.log("Button found: ", buttonToClick);
buttonToClick.click();
} else {
console.error('Button not found using the provided CSS selector');
}
}
It returns buttonToClick as undefined.
I've tried:
- Changing selector to '.zp_FVbJk'
- Using queryselector()
Solution
I think getElementsByClassName
to select the button by its class name. If that's not working, there might be a few reasons.
So, I suggest you use querySelector
and hope my code using `querySelector``` might be helpful.
document.addEventListener('DOMContentLoaded', function() {
let buttonToClick = document.querySelector('.zp_FVbJk');
if (buttonToClick) {
console.log("Button found: ", buttonToClick);
buttonToClick.click();
} else {
console.error('Button not found using the provided CSS selector');
}
});
Answered By - BlueSpider
0 comments:
Post a Comment
Note: Only a member of this blog may post a comment.