Dynamically create more inputs
This commit is contained in:
parent
befca5d0a8
commit
9f2ce94527
26
index.html
26
index.html
|
@ -61,12 +61,14 @@
|
|||
<script src="https://cdnjs.cloudflare.com/ajax/libs/big-integer/1.6.44/BigInteger.min.js"
|
||||
integrity="sha256-es+ex6Oj344uak+VnCPyaHY2nzQkqhr7ByWVQgdjATA=" crossorigin="anonymous"></script>
|
||||
<script>
|
||||
const alphabet = "0123456789abcdef";
|
||||
|
||||
const updateAllInputs = newValue => {
|
||||
for (const numberInput of $a(".numberInput"))
|
||||
numberInput.value = newValue.toString(numberInput.getAttribute("data-base"));
|
||||
numberInput.value = newValue.toString(numberInput.getAttribute("data-base"), alphabet);
|
||||
};
|
||||
|
||||
const createTextarea = (base, name) => {
|
||||
const createInput = (base, name) => {
|
||||
const label = document.createElement("label");
|
||||
label.setAttribute("for", `${name}Input`);
|
||||
label.innerHTML = name;
|
||||
|
@ -76,29 +78,35 @@
|
|||
textarea.className = "numberInput";
|
||||
textarea.setAttribute("data-base", base);
|
||||
textarea.oninput = () => {
|
||||
if (textarea.value)
|
||||
updateAllInputs(bigInt(textarea.value, base));
|
||||
if (textarea.value === undefined || textarea.value === null)
|
||||
return;
|
||||
|
||||
const inputAlphabet = alphabet.substring(0, base);
|
||||
textarea.value = textarea.value.toLowerCase().replace(new RegExp("[^" + inputAlphabet + "]"), "");
|
||||
updateAllInputs(bigInt(textarea.value, base));
|
||||
};
|
||||
|
||||
return [label, textarea];
|
||||
};
|
||||
|
||||
const addTextarea = (label, textarea) => {
|
||||
const addInput = (label, textarea) => {
|
||||
const inputs = $("#inputs");
|
||||
inputs.appendChild(label);
|
||||
inputs.appendChild(textarea);
|
||||
};
|
||||
|
||||
const generateTextareas = () => {
|
||||
const generateInputs = () => {
|
||||
const textareas = [["2", "Binary"], ["8", "Octal"], ["10", "Decimal"], ["16", "Hexadecimal"]];
|
||||
|
||||
for (const textarea of textareas) {
|
||||
const elements = createTextarea(textarea[0], textarea[1]);
|
||||
addTextarea(elements[0], elements[1]);
|
||||
const elements = createInput(textarea[0], textarea[1]);
|
||||
addInput(elements[0], elements[1]);
|
||||
}
|
||||
|
||||
$("#" + textareas[0][1] + "Input").focus();
|
||||
};
|
||||
|
||||
doAfterLoad(() => generateTextareas());
|
||||
doAfterLoad(() => generateInputs());
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
|
|
Loading…
Reference in New Issue