try {
document.querySelector("div[role='banner']").remove()
document.querySelector("div[aria-label='start']").remove()
document.getElementById("container").children[0].style.left = '0px';
document.getElementById("container").children[0].style.top = '300px';
document.getElementById('container').children[0].style.width = '828px';
document.getElementById('container').children[0].style.height = '466px';
} catch (error) {
console.log(error)
}
I one of the documents above fails, the others are not executed, how i could execute all even if one of them fails?
Theres no other option than calling each one inside of a try block?
Use optional chaining instead of try, which will simply stop the statement on that line rather than throwing an error in case one of the values on the left is nullish. You can also check to see if the child exists by storing it in a variable before assigning to its style.
document.querySelector("div[role='banner']")?.remove()
document.querySelector("div[aria-label='start']")?.remove()
const child = document.getElementById("container").children[0];
if (child) {
Object.assign(
child.style,
{ left: '0px', top: '300px', width: '828px', height: '466px' }
);
}
That said, this sort of code is a bit of a code smell. Consider if you could toggle a CSS class on a parent element instead, and then apply the styles as needed (display: none and the left/top/width/height).