i have an HTML and javasscript Keypad to typing Numbers into input using keypad im trying to add more inputs this keypad working good with only one input
How i make my code javascript work with second input too when i focused on it the keypad should be able to typing in second input using same keypad?
JavaScript
x
8
1
function resetNumber()2
{3
document.getElementById("field").value = '';4
}5
6
function setNumber(number) {7
document.getElementById("field").value = document.getElementById("field").value === number ? '' : document.getElementById("field").value += number;8
}JavaScript
1
23
23
1
<html>2
<head>3
<script src="/scripts/snippet-javascript-console.min.js?v=1"></script>4
</head>5
<body>6
<html>7
<body>8
<button onclick="resetNumber()">Reset</button>9
<button onclick="setNumber(0)">0</button>10
<button onclick="setNumber(1)">1</button>11
<button onclick="setNumber(2)">2</button>12
<button onclick="setNumber(3)">3</button>13
<button onclick="setNumber(4)">4</button>14
<button onclick="setNumber(5)">5</button>15
<button onclick="setNumber(6)">6</button>16
<button onclick="setNumber(7)">7</button>17
<button onclick="setNumber(8)">8</button>18
<button onclick="setNumber(9)">9</button>19
<br />20
<input type="text" id="field" />21
<input type="text" id="second" />22
</body>23
</html>Advertisement
Answer
I would suggest storing the active input in a variable when one of them is focused:
JavaScript
1
26
26
1
let activeInput;2
3
document.querySelector("#field").addEventListener("focus", (event) => {4
activeInput = event.target;5
});6
7
document.querySelector("#second").addEventListener("focus", (event) => {8
activeInput = event.target;9
});10
11
function resetNumber() {12
if (!activeInput) {13
console.log("select an input!");14
return;15
}16
activeInput.value = "";17
}18
function setNumber(number) {19
if (!activeInput) {20
console.log("select an input!");21
return;22
}23
activeInput.value = activeInput.value === number ? "" : (activeInput.value += number);24
}25
26