tools
/
converter
1
0
Fork 0
Code Issues Pull Requests Releases Activity

Dynamically create more inputs

This commit is contained in:
Florine W. Dekker 2019-07-01 23:58:30 +02:00
parent befca5d0a8
commit 9f2ce94527
Signed by: FWDekker
GPG Key ID: B1B567AF58D6EE0F
1 changed files with 17 additions and 9 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

26
index.html
View File

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