Help:Adding JS to your Wiki

In this example, the example name is JSExample, but this can be changed in your code.

Libraries
You can find a list of all libraries here. If you create a library, make sure to put an import statement in MediaWiki:Common.js so everyone can use it. Make documentation in the page.

Setup
importScript('MediaWiki:JSExample.js');
 * 1) Create the template that will be used.
 * 2) Create the .js file under the MediaWiki: namespace.
 * 3) In MediaWiki:Common.js, paste the following code:

Template
Put the following code in the template you created:

JavaScript
In the .js file you created, put the following code: // Owner: username setTimeout(=> {   let templateName = 'JSExample'; // your template name here    try {        let template = Utils.get(templateName);        if(template == undefined) return;        /* your code here */        template.appendChild(/* elements */)    } catch (err) {		document.getElementById(templateName).style.color = "red";		document.getElementById(templateName).style.fontSize = "30px";		document.getElementById(templateName).style.border = "1px solid red";		document.getElementById(templateName).style.textAlign = "center";		document.getElementById(templateName).textContent = "JS could not be loaded!"	} },500) You cannot input your HTML as raw HTML, so you will need to build your HTML with JavaScript.

Result
So the following code: // Owner: Rus setTimeout(=> {   let templateName = 'JSExample'; // your template name here    try {        let template = Utils.get(templateName);        if(template == undefined) return;        let greeting = Utils.createElement("div", {textContent: "Hello!", fontSize: "20px"})        let input = Utils.createElement("textarea")        let div = Utils.createElement("div")        let button = Utils.createElement("button", {textContent: "Click me!"})

input.oninput = e => { div.textContent = input.value }

button.onclick = e => { alert(div.textContent); }       template.appendChild(Utils.bundle([greeting, input, div, button])) } catch (err) { document.getElementById(templateName).style.color = "red"; document.getElementById(templateName).style.fontSize = "30px"; document.getElementById(templateName).style.border = "1px solid red"; document.getElementById(templateName).style.textAlign = "center"; document.getElementById(templateName).textContent = "JS could not be loaded!" } },500) Produces this output: