/    Sign up×
Community /Pin to ProfileBookmark

Coding Virtual Numerical Keyboard

Hello. I am coding virtual numerical keyboard. Can I please have an advice why my code doesn’t work?

[code]
<!DOCTYPE html>
<html>
<head>
<style>
@import url(‘https://fonts.googleapis.com/css2?family=Open+Sans:wght@300&display=swap’);
body{font-family: ‘Open Sans’, sans-serif;}
</style>
</head>
<body>

<input id=”myInput” type=”text” />
<br /><br />
<input type=”button” value=1 onclick=”input(1);” />
<input type=”button” value=2 onclick=”input(2);” />
<input type=”button” value=3 onclick=”input(3);” />
<br />
<input type=”button” value=4 onclick=”input(4);” />
<input type=”button” value=5 onclick=”input(5);” />
<input type=”button” value=6 onclick=”input(6);” />
<br />
<input type=”button” value=7 onclick=”input(7);” />
<input type=”button” value=8 onclick=”input(8);” />
<input type=”button” value=9 onclick=”input(9);” />
<br /><br />
<input type=”button” value=backspace onclick=”del();” />

<script>
function input(e){
var myInput = document.getElementById(“myInput”);
myInput.value = myInput.value + e.value;
}

function del(){
var myInput = document.getElementById(“myInput”);
myInput.value = myInput.value.substr(0, myInput.value.length – 1);
}
</script>

</body>
</html>
[/code]

to post a comment
HTMLJavaScript

4 Comments(s)

Copy linkTweet thisAlerts:
@SempervivumJul 20.2021 — You are handing over the values directly to your function input: `onclick="input(9);"</C><br/>
Therefore you can use them directly inside your function:
<CODE>
`<i>
</i>function input(val){
var myInput = document.getElementById("myInput”);
myInput.value = myInput.value + val;
}<i>
</i>
`</CODE>
Alternatively you can hand over the button element like this:<br/>
<C>
onclick="input(this);"</C><br/>
And get the value like this:
<CODE>
`<i>
</i>function input(btn){
var myInput = document.getElementById("myInput”);
myInput.value = myInput.value + btn.val;
}<i>
</i>
``
Copy linkTweet thisAlerts:
@codewitchauthorJul 20.2021 — Thank you Sempervivum! It works!

Just a little typo:
<i>
</i>function input(btn){
var myInput = document.getElementById("myInput");
myInput.value = myInput.value + btn.value;
}


value insted of val
Copy linkTweet thisAlerts:
@SempervivumJul 20.2021 — I see, you are right!
Copy linkTweet thisAlerts:
@JMRKERJul 20.2021 — I would suggest that you remove the hard-coded button actions to be a bit more flexible with inputs.

Here I added 2 extra buttons (0 and '.') as a demonstration.

You could also create a calculator template with '+', '-', '*' and '/' keys if later desired.

``<i>
</i>&lt;!DOCTYPE html&gt;
&lt;html&gt;
&lt;head&gt;
&lt;style&gt;
@import url('https://fonts.googleapis.com/css2?family=Open+Sans:wght@300&amp;display=swap');
body{font-family: 'Open Sans', sans-serif;}
&lt;/style&gt;
&lt;/head&gt;
&lt;body&gt;
&lt;!-- From: https://www.webdeveloper.com/d/395515-coding-virtual-numerical-keyboard/2 --&gt;

&lt;input id="myInput" type="text" /&gt;
&lt;br /&gt;&lt;br /&gt;
&lt;div id="keypad"&gt;
&lt;input type="button" value='1' /&gt;
&lt;input type="button" value='2' /&gt;
&lt;input type="button" value='3' /&gt;
&lt;input type="button" value='.' /&gt;
&lt;br /&gt;
&lt;input type="button" value='4' /&gt;
&lt;input type="button" value='5' /&gt;
&lt;input type="button" value='6' /&gt;
&lt;br /&gt;
&lt;input type="button" value='7' /&gt;
&lt;input type="button" value='8' /&gt;
&lt;input type="button" value='9' /&gt;
&lt;input type="button" value='0' /&gt;

&lt;!-- Easy to add operation buttons as well
&lt;br /&gt;
&lt;input type="button" value='+' /&gt;
&lt;input type="button" value='-' /&gt;
&lt;input type="button" value='*' /&gt;
&lt;input type="button" value='/' /&gt;
&lt;!-- end of optional operation buttons --&gt;

&lt;/div&gt;
&lt;br /&gt;
&lt;input type="button" id='bksp' value='backspace' /&gt;

&lt;script&gt;
function input(val){
var myInput = document.getElementById('myInput');
myInput.value += val;
// myInput.value = myInput.value + val;
}

function del(){
var myInput = document.getElementById('myInput');
myInput.value = myInput.value.substr(0, myInput.value.length - 1);
}

function init() {
const sel = document.querySelectorAll('#keypad input');
for (let el of sel) {
el.addEventListener(
'click',
function(event) { input(event.currentTarget.value) },
false
);
}
document.getElementById('bksp').addEventListener('click', del);
} init();

&lt;/script&gt;

&lt;/body&gt;
&lt;/html&gt;<i>
</i>
``
×

Success!

Help @codewitch spread the word by sharing this article on Twitter...

Tweet This
Sign in
Forgot password?
Sign in with TwitchSign in with GithubCreate Account
about: ({
version: 0.1.9 BETA 6.2,
whats_new: community page,
up_next: more Davinci•003 tasks,
coming_soon: events calendar,
social: @webDeveloperHQ
});

legal: ({
terms: of use,
privacy: policy
});
changelog: (
version: 0.1.9,
notes: added community page

version: 0.1.8,
notes: added Davinci•003

version: 0.1.7,
notes: upvote answers to bounties

version: 0.1.6,
notes: article editor refresh
)...
recent_tips: (
tipper: @meenaratha,
tipped: article
amount: 1000 SATS,

tipper: @meenaratha,
tipped: article
amount: 1000 SATS,

tipper: @AriseFacilitySolutions09,
tipped: article
amount: 1000 SATS,
)...