Topic on Project:Support desk

JavaScript works in Chrome console but not in Common.js

13
49.230.62.64 (talkcontribs)

In MediaWiki 1.32.0 the following code works for me fine in (latest) Chrome console but not in Common.js:

document.querySelectorAll([ "#n-Special-pages", "#n-Categories", "#n-Webpages-to-create", "#n-CSS", "#n-JS1", "#n-JS2", "#n-Edit-this-menu" ]).forEach((element) => { element.style.display = "none"; });

Even If I wrap it in a one-second setTimeout() with an anonymous function it still doesn't work:

window.setTimeout(()=>{ document.querySelectorAll([ "#n-Special-pages", "#n-Categories", "#n-Webpages-to-create", "#n-CSS", "#n-JS1", "#n-JS2", "#n-Edit-this-menu" ]).forEach((element) => { element.style.display = "none"; }); }, 1000);

Krinkle (talkcontribs)

Note that the querySelectorAll does not support an Array. This is currently working by accident, and will likely fail in the future. This method requires a valid CSS selector string. Such string can take multiple selectors separated by a comma, like so: querySelector("#foo, bar"). Just like in CSS: #foo, #bar { display: none }. It should be a single string, not an array of strings.


This also brings me to a perhaps alternate solution to your problem, which is to remove this JavaScript code entirely from your Common.js page, and instead use Common.css instead. This would be much more performant (save Internet bandwidth and battery power), and also less annoying for users (always invisible, instead of first visible and then invisible).

49.230.62.64 (talkcontribs)

Righteously formatted:

window.setTimeout(()=>{

document.querySelectorAll([

"#n-Special-pages",

"#n-Categories",

"#n-Webpages-to-create",

"#n-CSS",

"#n-JS1",

"#n-JS2",

"#n-Edit-this-menu"

]).forEach((element) => {

element.style.display = "none"

;}

);}, 1000);

MarkAHershberger (talkcontribs)

does this work in MediaWiki 1.31?

Ciencia Al Poder (talkcontribs)

The timeout may not be sufficient if the DOM is not ready when you execute the document.querySelectorAll.

Wrap your code in:

$(function() {
// Your code here
});
49.230.62.64 (talkcontribs)

@Ciencia Al Poder by principle I avoid using jQuery (of course this principle can have exceptions).

How will you do this with vanilla, if it's even possible?

Ciencia Al Poder (talkcontribs)
49.230.62.64 (talkcontribs)

@Ciencia Al Poder sadly both ways didn't work. Also I remember I never had a case when setTimeout didn't work and DOMContentLoaded did. There must be another problem.

Ciencia Al Poder (talkcontribs)

Feel free to ask on a JavaScript specialized forum, then, since this doesn't seem to be a MediaWiki problem.

49.230.58.174 (talkcontribs)

I tell you with all sincerity that to me it does seem MediaWiki 1.32.0 related because I cannot explain why the code works in browser console but not in Common.js...

MarkAHershberger (talkcontribs)

Even if it is caused by the JS in MW 1.32, most of us aren't JS experts here. A developer like @Krinkle might know, but most of us here in the support desk won't have a clue.

Krinkle (talkcontribs)

The two solutions offered by @Ciencia are both correct ways to ensure your customisation logic waits until the page has finished loading. This is the standard and only supported way to run such logic, and always has been (since 2011). It has not changed in recent releases.


Given that it does not appear to solve the problem you are experiencing, it is most likely that the problem is not related to parts of the page created by MediaWiki, as those will be ready by then, no exception.


The code pasted at the start of this thread does not appear to make sure of anything MediaWiki-related. It selects elements on the page using plain DOM JavaScript methods, with target IDs that are custom to the local wiki. If these elements don't exist for some reason, it is likely because they are not created by anything on the page. Or maybe you have other customisation code (like a gadget, or something else in your Common.js file) that is creating those links, in which case this is a question of "How do I select an element created by me in JavaScript", for which StackOverflow might be a better place to ask and learn how to do that.


Most likely, your Common.js file is experiencing a "race condition", which means it worked by coincidence in the past and now not any more. (E.g. two asynchronous code paths that are in need for better organising so that they run in the right order).

Utini (talkcontribs)

sorry.. nevermind. wrong topic.

Reply to "JavaScript works in Chrome console but not in Common.js"