Coding Virtual Numerical Keyboard [closed] - javascript

Closed. This question does not meet Stack Overflow guidelines. It is not currently accepting answers.
This question does not appear to be about programming within the scope defined in the help center.
Closed 1 year ago.
Improve this question
I am coding virtual numerical keyboard. Can I please have an advice why my code doesn't work?
<!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>
I am also thinking why do the buttons have different width, considering that Open Sans is a monospaced font...
Thank you.

<!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 += e;
}
function del() {
var myInput = document.getElementById("myInput");
myInput.value = myInput.value.substr(0, myInput.value.length - 1);
}
</script>
</body>
</html>

You need to use
var myInput = document.getElementById("myInput");
instead of
var myInput = document.getElementById("myInput”);
that's it.
Also value is e only not e.value.
myInput.value = myInput.value + e;

Related

How do i display button value in a text field in JavaScript(not JQuery) [closed]

Closed. This question needs details or clarity. It is not currently accepting answers.
Want to improve this question? Add details and clarify the problem by editing this post.
Closed 7 years ago.
Improve this question
i have made a simple calculator and i am unable to print the value of my buttons on click onto the text field. How do i do that? I want to use JavaScript only, not JQuery. When i click on my buttons the values are not displaying on the text field "scr". How can i implement that?
here is my code:
<html>
<head>
<title>Calculator</title>
<style>
</style>
<script type="javascript">
function display0()
{
a=document.all.f1.zero.value;
document.all.getElementById("scr").innerHTML=a;
b=document.all.f1.one.value;
document.all.getElementById('scr').value=b;
c=document.all.f1.two.value;
document.all.getElementById("scr").innerHTML=c;
d=document.all.f1.three.value;
document.all.getElementById("scr").innerHTML=d;
e=document.all.f1.four.value;
document.all.getElementById("scr").innerHTML=e;
f=document.all.f1.five.value;
document.all.getElementById("scr").innerHTML=f;
g=document.all.f1.six.value;
document.all.getElementById("scr").innerHTML=g;
h=document.all.f1.seven.value;
document.all.getElementById("scr").innerHTML=h;
i=document.all.f1.eight.value;
document.all.getElementById("scr").innerHTML=i;
j=document.all.f1.nine.value;
document.all.getElementById("scr").innerHTML=j;
k=document.all.f1.sum.value;
document.all.getElementById("scr").innerHTML=k;
l=document.all.f1.sub;
document.all.getElementById("scr").innerHTML=l;
m=document.all.f1.mul;
document.all.getElementById("scr").innerHTML=m;
n=document.all.f1.div;
document.all.getElementById("scr").innerHTML=n;
o=document.all.f1.clear;
document.all.getElementById("scr").innerHTML=o;
}
</script>
</head>
<body>
<form name="f1" id="f1" method="post">
<div>
<input type="text" id="scr" name="scr" />
</div>
<br/>
<div>
<input type="button" value="7" onclick="display7()" id="seven"name="seven"/>
<input type="button" value="8" onclick="display8()" id="eight"name="eight"/>
<input type="button" value="9" onclick="display9()" id="nine"name="nine"/>
<input type="button" value="/" onclick="display/()" id="div"name="div"/>
<br/>
<input type="button" value="4" onclick="display4()" id="four"name="four"/>
<input type="button" value="5" onclick="display5()" id="five"name="five"/>
<input type="button" value="6" onclick="display6()" id="six"name="six"/>
<input type="button" value="X" onclick="displayX()" id="mul"name="mul"/>
<br/>
<input type="button" value="1" onclick="display()" id="one" name="one" />
<input type="button" value="2" onclick="display2()" id="two"name="two"/>
<input type="button" value="3" onclick="display3()" id="three"name="three"/>
<input type="button" value="-" onclick="display-()" id="sub"name="sub"/>
<br/>
<input type="button" value="CLR" onclick="displayC()"/>
<input type="button" value="0" onclick="display0()" id="zero"name="zero"/>
<input type="button" value="=" onclick="display=()" id="eq"name="eq"/>
<input type="button" value="+" onclick="display+()" id="sum"name="sum"/>
</div>
<br/>
</form>
</body>
</html>
<input type="button" value="test" onClick="document.getElementById('textfield').innerHTML=this.value">
<div id="textfield"></div>
You can try this
HTML
<button id="plus">Plus</button>
<input type="text" id="ih"></input>
Javascript
document.getElementById("ih").value=document.getElementById("plus").innerHTML;
Try this:
var showValue = function(val){
document.getElementById('pressed').value = parseInt(val);
}
<p><input type="text" id="pressed" value="" /></p>
<p>
<button onclick="showValue(1)">1</button>
<button onclick="showValue(2)">2</button>
<button onclick="showValue(3)">3</button>
</p>

Selecting dynamically Element id in javascript

The code given below does not work.
<html>
<head>
<script type="text/javascript">
function dosomething(ID){
var name = document.getElementById(ID).value;
alert(name);
}
</script>
</head>
<body>
<input type="text" id="name1" /><input type="button" value="click" onclick="dosomething("name1")" />
<br /><br />
<input type="text" id="name2" /><input type="button" value="click" onclick="dosomething("name2")" />
</body>
</html>
Your issue is with the quotes not used properly, console should show you the syntax error.
<input type="button" value="click" onclick="dosomething("name1")" />
to
<input type="button" value="click" onclick="dosomething('name1')" />
Fiddle

How to Pass toggled data on submit?

i have the following form
<html>
<head>
<style type="text/css">
.on {
border:1px outset;
color:#369;
background:#efefef;
}
.off {
border:1px outset;
color:#369;
background:#f9d543;
}
</style>
<script language="javascript">
function togglestyle(el){
if(el.className == "on") {
el.className="off";
} else {
el.className="on";
}
}
</script>
</head>
<body>
<form method="POST" action="#" >
<input type="button" id="btn" value="1" name="a[]" class="off" onclick="togglestyle(this)" />
<input type="button" id="btn" value="2" name="a[]" class="off" onclick="togglestyle(this)" />
<input type="button" id="btn" value="3" name="a[]" class="off" onclick="togglestyle(this)" />
<input type="button" id="btn" value="4" name="a[]" class="off" onclick="togglestyle(this)" />
<input type="button" id="btn" value="5" name="a[]" class="off" onclick="togglestyle(this)" />
<input type="button" id="btn" value="6" name="a[]" class="off" onclick="togglestyle(this)" />
<input type="submit" name="submit" value="Submit" />
</form>
</body>
</html>
Here i want to use toggle action, i dont want to use checkbox here, I want to pass the toggled value from this form. Is there any way to do this?
in the same page i already have some checkbox with with check action enabled, here i want to pass max 3 toggled values, i have tried using radio box but that will work only for one, not with 3. how to do this.

How come this line of code returns me an "undefined" then followed by a value

How come method equal always returns with an "undefined" followed by a number?
and when I try to parse it. it returns me a NaN.
<!DOCTYPE>
<html>
<head>
<script>
var fnum;
var secondNum;
var operation;
function msg(val) {
document.getElementById("fnumtext").value += val;
fnum += val;
}
function showOperation(oper)
{
document.getElementById("fnumtext").value = "";
document.getElementById("operation").value = oper;
operation = oper;
}
function equal() {
secondNum = document.getElementById("fnumtext").value;
alert(fnum);
}
</script>
</head>
<body>
<input id = "fnumtext"type="text" name="firstnum" /><br />
<input id = "operation" type="text" name="secondnum" /><br />
<input type="button" value="1" onclick="msg('1')" />
<input type="button" value="2" onclick="msg('2')" />
<input type="button" value="3" onclick="msg('3')" /></br>
<input type="button" value="4" onclick="msg('4')" />
<input type="button" value="5" onclick="msg('5')" />
<input type="button" value="6" onclick="msg('6')" /><br/>
<input type="button" value="7" onclick="msg('7')" />
<input type="button" value="8" onclick="msg('8')" />
<input type="button" value="9" onclick="msg('9')" /></br>
<input type="button" value="0" onclick="msg('0')" /></br>
<input type="button" value="+" onclick="showOperation('+')" />
<input type="button" value="*" onclick="showOperation('*')" />
<input type="button" value="/" onclick="showOperation('/')" />
<input type="button" value="-" onclick="showOperation('-')" />
<input type="button" value="=" onclick="equal()" />
</body>
</html>
Your val variable in the msg() function is inputted as a string. So when you attempt to do +=, it treats its original value as a string so you end up doing 'undefined' + <some integer> creating your effect.
Try removing the single quotes from all your function calls in your onclick events, and just send the integer. Also, you should define var fnum = 0; rather than just declaring the variable if you want to use the += operator.
You call "alert" with "fnum" variable as param. It can be undefined if you press "equal" before pressing any other button

Writing numeric words with onkeypress

How can I write numeric numbers into an input field by pressing a button?
Suppose I have a button:
<input type="button" value="1">
Then I want, that when numeric pad button 1 is pressed it adds numeric words just like Windows Calculator.
I'm not sure what you are asking, but this code will add numbers to an input box (using jQuery).
HTML
<input id="data" type="text" />
<br />
<br />
<input type="button" value="1" />
<input type="button" value="2" />
<input type="button" value="3" /><br />
<input type="button" value="4" />
<input type="button" value="5" />
<input type="button" value="6" /><br />
<input type="button" value="7" />
<input type="button" value="8" />
<input type="button" value="9" />
Script
$(document).ready(function(){
$(':button').click(function(){
$('#data').val( $('#data').val() + $(this).val() );
})
})

Categories

Resources