MediaWiki:Common.js: Difference between revisions
Jump to navigation
Jump to search
No edit summary |
No edit summary |
||
| Line 1: | Line 1: | ||
// | // MediaWiki:Common.js | ||
document.addEventListener("DOMContentLoaded", function () { | document.addEventListener("DOMContentLoaded", function() { | ||
var container = document.getElementById("calcContainer"); | var container = document.getElementById("calcContainer"); | ||
if (!container) return; | if (!container) return; | ||
// Build calculator HTML | // Build calculator HTML dynamically | ||
container.innerHTML = | container.innerHTML = | ||
'<div style="margin:10px 0;">' + | '<div style="margin:10px 0;">' + | ||
'<label>Num1: <input type="number" id="num1" value="1000" style="width:60px;"></label>' + | |||
'<label>Num2: <input type="number" id="num2" value="0" style="width:60px;"></label>' + | |||
'<label>Operation: ' + | |||
'<select id="op">' + | |||
'<option value="+">+</option>' + | |||
'<option value="-">-</option>' + | |||
'<option value="*">*</option>' + | |||
'<option value="/">/</option>' + | |||
'</select>' + | |||
'</label>' + | |||
'<button id="calcButton">Calculate</button>' + | |||
'</div>' + | '</div>' + | ||
'<div>Result: <span id="result"> | '<div>Result: <span id="result">0</span></div>'; | ||
// | // Add calculator functionality | ||
var btn = document.getElementById("calcButton"); | var btn = document.getElementById("calcButton"); | ||
btn.addEventListener("click", function () { | btn.addEventListener("click", function() { | ||
var | var a = parseFloat(document.getElementById("num1").value); | ||
var | var b = parseFloat(document.getElementById("num2").value); | ||
var | var op = document.getElementById("op").value; | ||
var | var result; | ||
if (isNaN(a) || isNaN(b)) { | |||
result = "Enter valid numbers"; | |||
} else { | |||
switch(op) { | |||
case "+": result = a + b; break; | |||
case "-": result = a - b; break; | |||
case "*": result = a * b; break; | |||
case "/": result = (b !== 0) ? (a / b) : "∞"; break; | |||
default: result = "Error"; | |||
} | |||
} | |||
document.getElementById("result").textContent = result; | |||
document.getElementById("result").textContent = | |||
}); | }); | ||
}); | }); | ||
Revision as of 02:52, 5 March 2026
// MediaWiki:Common.js
document.addEventListener("DOMContentLoaded", function() {
var container = document.getElementById("calcContainer");
if (!container) return;
// Build calculator HTML dynamically
container.innerHTML =
'<div style="margin:10px 0;">' +
'<label>Num1: <input type="number" id="num1" value="1000" style="width:60px;"></label>' +
'<label>Num2: <input type="number" id="num2" value="0" style="width:60px;"></label>' +
'<label>Operation: ' +
'<select id="op">' +
'<option value="+">+</option>' +
'<option value="-">-</option>' +
'<option value="*">*</option>' +
'<option value="/">/</option>' +
'</select>' +
'</label>' +
'<button id="calcButton">Calculate</button>' +
'</div>' +
'<div>Result: <span id="result">0</span></div>';
// Add calculator functionality
var btn = document.getElementById("calcButton");
btn.addEventListener("click", function() {
var a = parseFloat(document.getElementById("num1").value);
var b = parseFloat(document.getElementById("num2").value);
var op = document.getElementById("op").value;
var result;
if (isNaN(a) || isNaN(b)) {
result = "Enter valid numbers";
} else {
switch(op) {
case "+": result = a + b; break;
case "-": result = a - b; break;
case "*": result = a * b; break;
case "/": result = (b !== 0) ? (a / b) : "∞"; break;
default: result = "Error";
}
}
document.getElementById("result").textContent = result;
});
});