Trying to make a small numberpad as shown in the picture attached as apart of my Javascript practice. Loooking for help/tips that could possibly fix or pit me in the right direction in to getting a working Numpad that has a working reset function. Without the reset function code, im able to input numbers into my textbox. but the additional code lose functionality.
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>Q4</title>
</head>
<body>
<form action="" method="" name="Q4">
<table cellpadding="3" cellspacing="3" border="0">
<td colspan="3"><input id=Key type="text" value="" maxlength="10" name="Key" /></td>
<tr>
<td> <input type="button" value="1" id="1" " style="font-size:25px;" onClick=addNumber(this); /></td>
<td> <input type="button" value="2" id="2" " style="font-size:25px;" onClick=addNumber(this); /></td>
<td> <input type="button" value="3" id="3" " style="font-size:25px;" onClick=addNumber(this); /></td>
</tr>
<tr>
<td><input type="button" value="4" id="4" " style="font-size:25px;" onClick=addNumber(this); /></td>
<td><input type="button" value="5" id="5" " style="font-size:25px;" onClick=addNumber(this); /></td>
<td><input type="button" value="6" id="6" " style="font-size:25px;" onClick=addNumber(this); /></td>
</tr>
<tr>
<td><input type="button" value="7" id="7" " style="font-size:25px;" onClick=addNumber(this); /></td>
<td><input type="button" value="8" id="8" " style="font-size:25px;" onClick=addNumber(this); /></td>
<td><input type="button" value="9" id="9" " style="font-size:25px;" onClick=addNumber(this); /></td>
</tr>
<tr>
<td colspan="3"><input type="button" value="Reset" id="Reset" onClick=clearNumber(this); /> </td>
</tr>
</table>
<script>
function addNumber(element){
document.getElementById('Key').value = document.getElementById('Key').value+element.value;
}
function Reset {
document.getElementById("Key").reset();
}
</script>
</body>
</html>
Try this..
function addNumber(element) {
document.getElementById('Key').value = document.getElementById('Key').value+element.value;
}
function clearNumber() {
document.getElementById("Key").value = "";
}
<table cellpadding="3" cellspacing="3" border="0">
<tr>
<td colspan="3">
<input id="Key" type="text" value="" maxlength="10" name="Key" />
</td>
</tr>
<tr>
<td>
<input type="button" value="1" id="1" style="font-size:25px;" onclick="addNumber(this)" />
</td>
<td>
<input type="button" value="2" id="2" style="font-size:25px;" onclick="addNumber(this)" />
</td>
<td>
<input type="button" value="3" id="3" style="font-size:25px;" onclick="addNumber(this)" />
</td>
</tr>
<tr>
<td>
<input type="button" value="4" id="4" style="font-size:25px;" onclick="addNumber(this)" />
</td>
<td>
<input type="button" value="5" id="5" style="font-size:25px;" onclick="addNumber(this)" />
</td>
<td>
<input type="button" value="6" id="6" style="font-size:25px;" onclick="addNumber(this)" />
</td>
</tr>
<tr>
<td>
<input type="button" value="7" id="7" style="font-size:25px;" onclick="addNumber(this)" />
</td>
<td>
<input type="button" value="8" id="8" style="font-size:25px;" onclick="addNumber(this)" />
</td>
<td>
<input type="button" value="9" id="9" style="font-size:25px;" onclick="addNumber(this)" />
</td>
</tr>
<tr>
<td colspan="3">
<input type="button" value="Reset" id="Reset" onclick="clearNumber(this)" />
</td>
</tr>
</table>
Related
Still a beginner in using jquery, and its about making a calculator, I know this is a big problem because it still has an error in it and there's a lot of code to be done to make it work, so what I need is adding, subtracting, multiplying, and dividing two numbers, and upon pressing the operator the first number that was pressed wouldn't be gone rather it will be gone and be change after pressing for the second number. It would also be a big thanks if y'all could help me my problem. Thanks a lot.
$(document).ready(function() {
var number = "";
$(".numeric").click(function() {
var num = $(this).val();
number = number + "" + num;
$("#container").val(number);
});
$(".clear").click(function() {
$("#container").val("");
number = "";
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<!DOCTYPE html>
<html>
<head>
<title>Sample Calculator</title>
</head>
<body>
<input type="text" id="container" placeholder="" readOnly="readOnly" />
<br /><br />
<table border="1" cellpadding="3">
<tbody>
<tr>
<td>
<input type="button" class="numeric" value="7" />
</td>
<td>
<input type="button" class="numeric" value="8" />
</td>
<td>
<input type="button" class="numeric" value="9" />
</td>
<td>
<input type="button" class="operation" value="+" />
</td>
</tr>
<tr>
<td>
<input type="button" class="numeric" value="4" />
</td>
<td>
<input type="button" class="numeric" value="5" />
</td>
<td>
<input type="button" class="numeric" value="6" />
</td>
<td>
<input type="button" class="operation" value="-" />
</td>
</tr>
<tr>
<td>
<input type="button" class="numeric" value="1" />
</td>
<td>
<input type="button" class="numeric" value="2" />
</td>
<td>
<input type="button" class="numeric" value="3" />
</td>
<td>
<input type="button" class="operation" value="*" />
</td>
</tr>
<tr>
<td>
<input type="button" class="numeric" value="0" />
</td>
<td>
<input type="button" class="operation" value="=" />
</td>
<td>
<input type="button" class="operation" value="/" />
</td>
<td>
<input type="button" class="clear" value="Clear" />
</td>
</tr>
</tbody>
</table>
</body>
</html>
CE button of my calculator is not working,it just clears all numbers on clicking CE button.I just want that on clicking CE button,it only delete last number and not all numbers and one more thing when the calculator load it will show default 0 value and when any number entered 0 will replace with that number
<html>
<head>
<title>Calculator
</title>
<link rel="stylesheet" href="index.css">
</head>
<body>
<center>
<form name="calculator">
<div style=" width: 200px;height: 250px;border: 1px solid #D0CECE;">
<table style="margin-top:20px;">
<tr>
<td>
<input name="displayresult" id="display" class="cal-input" disabled >
</td>
</tr>
</table>
<table border="0px" cellspacing="10px" style="margin-top:5px;">
<tr>
<td name="left" value="(" onclick="calculator.display.value += '('" class="cal-top">(</td>
<td name="right" value=")" onclick="calculator.display.value += ')'" class="cal-top"> )</td>
<td class="operator cal-top" name="percent" value="%" onclick="calculator.display.value += '%'">%</td>
<td id="clear" name="clear" value="c" onclick="calculator.display.value = ''" class=" cal-top">CE</td>
</tr>
<tr>
<td name="seven" value="7" onclick="calculator.display.value += '7'" class="cal-number">7</td>
<td name="eight" value="8" onclick="calculator.display.value += '8'" class="cal-number">8</td>
<td name="nine" value="9" onclick="calculator.display.value += '9'" class="cal-number">9</td>
<td class="operator cal-top" name="div" value="/" onclick="calculator.display.value += '/'">/</td>
</tr>
<tr>
<td name="four" value="4" onclick="calculator.display.value += '4'" class="cal-number">4</td>
<td name="five" value="5" onclick="calculator.display.value += '5'" class="cal-number">5</td>
<td name="six" value="6" onclick="calculator.display.value += '6'" class="cal-number">6</td>
<td class="operator cal-top" name="times" value="*" onclick="calculator.display.value += '*'">*</td>
</tr>
<tr>
<td name="one" value="1" onclick="calculator.display.value += '1'" class="cal-number">1</td>
<td name="two" value="2" onclick="calculator.display.value += '2'" class="cal-number">2</td>
<td name="three" value="3" onclick="calculator.display.value += '3'" class="cal-number">3</td>
<td class="operator cal-top" name="minus" value="-" onclick="calculator.display.value += '-'">-</td>
</tr>
<tr>
<td name="zero" value="0" onclick="calculator.display.value += '0'" class="cal-number">0</td>
<td name="decimal" value="." onclick="calculator.display.value += '.'" class="cal-number">.</td>
<td name="result" value="=" onclick="calculator.display.value = eval(calculator.display.value)" class="cal-result"><b>=</b></td>
<td class="operator cal-top" name="plus" value="+" onclick="calculator.display.value += '+'">+</td>
</tr>
</table>
</div>
</form>
</center>
</body>
</head>
</html>
Change the CE button onclick function to the following:
onclick="str = calculator.display.value.slice(0, -1);calculator.display.value = str;"
Which gets the value of the calculator output, and removes the last character from it and puts that in a variable named str, and then sets the calculator output to the value of str.
Then add placeholder="0" to the <input> which displays the calculator output:
<input name="displayresult" id="display" class="cal-input" placeholder="0" disabled>
Which makes the <input> display the value 0 when it contains nothing, and it goes away when characters are added to the box.
<html>
<head>
<title>Calculator
</title>
<link rel="stylesheet" href="index.css">
</head>
<body>
<center>
<form name="calculator">
<div style=" width: 200px;height: 250px;border: 1px solid #D0CECE;">
<table style="margin-top:20px;">
<tr>
<td>
<input name="displayresult" id="display" class="cal-input" placeholder="0" disabled>
</td>
</tr>
</table>
<table border="0px" cellspacing="10px" style="margin-top:5px;">
<tr>
<td name="left" value="(" onclick="calculator.display.value += '('" class="cal-top">(</td>
<td name="right" value=")" onclick="calculator.display.value += ')'" class="cal-top"> )</td>
<td class="operator cal-top" name="percent" value="%" onclick="calculator.display.value += '%'">%</td>
<td id="clear" name="clear" value="c" onclick="str = calculator.display.value.slice(0, -1); calculator.display.value = str" class=" cal-top">CE</td>
</tr>
<tr>
<td name="seven" value="7" onclick="calculator.display.value += '7'" class="cal-number">7</td>
<td name="eight" value="8" onclick="calculator.display.value += '8'" class="cal-number">8</td>
<td name="nine" value="9" onclick="calculator.display.value += '9'" class="cal-number">9</td>
<td class="operator cal-top" name="div" value="/" onclick="calculator.display.value += '/'">/</td>
</tr>
<tr>
<td name="four" value="4" onclick="calculator.display.value += '4'" class="cal-number">4</td>
<td name="five" value="5" onclick="calculator.display.value += '5'" class="cal-number">5</td>
<td name="six" value="6" onclick="calculator.display.value += '6'" class="cal-number">6</td>
<td class="operator cal-top" name="times" value="*" onclick="calculator.display.value += '*'">*</td>
</tr>
<tr>
<td name="one" value="1" onclick="calculator.display.value += '1'" class="cal-number">1</td>
<td name="two" value="2" onclick="calculator.display.value += '2'" class="cal-number">2</td>
<td name="three" value="3" onclick="calculator.display.value += '3'" class="cal-number">3</td>
<td class="operator cal-top" name="minus" value="-" onclick="calculator.display.value += '-'">-</td>
</tr>
<tr>
<td name="zero" value="0" onclick="calculator.display.value += '0'" class="cal-number">0</td>
<td name="decimal" value="." onclick="calculator.display.value += '.'" class="cal-number">.</td>
<td name="result" value="=" onclick="calculator.display.value = eval(calculator.display.value)" class="cal-result"><b>=</b></td>
<td class="operator cal-top" name="plus" value="+" onclick="calculator.display.value += '+'">+</td>
</tr>
</table>
</div>
</form>
</center>
</body>
</head>
</html>
You can apply simple maths for this.Division and multiplication of 10
For CE: Take the number divide it by 10 and return the integer.
Ex: you pressed 103 already and now you click on CE.
now 103/10 = 10(in integer).
For 0 Replacement:the same reverse logic you can apply for the replacement of default zero by a number pressed
Ex:It is displaying 0 initially now you press 2
0(old value)*10+2(new key pressed)= 2
after you press 6
2(old value)*10+6(new key pressed)= 26
I have inventory list, I want to create invitation from the list.
All products have 2 inputs: price and counts (qtys) that are disabled.
I tried to create function that make the inputs enabled when the user clicked on the checkbox, but it's working only after 2 clicks...
function niv(id)
{
$("input:checkbox").click(function() {
$('#'+id).attr("disabled", !this.checked);
$('#p'+id).attr("disabled", !this.checked);
});
}
The HTML:
<tr class="even">
<td>225/45/17</td>
<td id=Bridgestone>Bridgestone</td>
<td>Putenza <h6>91y</h6></td>
<td><input type="text" id="p21" name="price[]" value="" disabled="disabled" /> <br /><small>מחיר מומלץ: 650</small> ₪</td>
<td><input type="checkbox" name="check[]" value="21" onclick="niv(21)"></td>
<td><input type="text" id="21" name="counts[]" disabled="disabled" /><small> מתוך 4 במלאי</small></td>
</tr>
<tr class="even">
<td>225/45/19</td>
<td id=Bridgestone>Bridgestone</td>
<td>Putenza <h6>96w</h6></td>
<td><input type="text" id="p20" name="price[]" value="" disabled="disabled" /> <br /><small>מחיר מומלץ: 1100</small> ₪</td>
<td><input type="checkbox" name="check[]" value="20" onclick="niv(20)"></td>
<td><input type="text" id="20" name="counts[]" disabled="disabled" /><small> מתוך 4 במלאי</small></td>
</tr>
<tr class="even">
<td>225/55/17</td>
<td id=Bridgestone>Bridgestone</td>
<td>Turanza runflat <h6>97y</h6></td>
<td><input type="text" id="p18" name="price[]" value="" disabled="disabled" /> <br /><small>מחיר מומלץ: 850</small> ₪</td>
<td><input type="checkbox" name="check[]" value="18" onclick="niv(18)"></td>
<td><input type="text" id="18" name="counts[]" disabled="disabled" /><small> מתוך 9 במלאי</small></td>
</tr>
<tr class="even">
<td>225/55/18</td>
<td id=Bridgestone>Bridgestone</td>
<td>t001 <h6>98v</h6></td>
<td><input type="text" id="p19" name="price[]" value="" disabled="disabled" /> <br /><small>מחיר מומלץ: 550-600</small> ₪</td>
<td><input type="checkbox" name="check[]" value="19" onclick="niv(19)"></td>
<td><input type="text" id="19" name="counts[]" disabled="disabled" /><small> מתוך 4 במלאי</small></td>
</tr>
<tr class="even">
<td>255/50/20</td>
<td id=Bridgestone>Bridgestone</td>
<td>Hp Sport <h6>109v</h6></td>
<td><input type="text" id="p14" name="price[]" value="" disabled="disabled" /> <br /><small>מחיר מומלץ: 850</small> ₪</td>
<td><input type="checkbox" name="check[]" value="14" onclick="niv(14)"></td>
<td><input type="text" id="14" name="counts[]" disabled="disabled" /><small> מתוך 4 במלאי</small></td>
</tr>
Your niv function is wrong. Try to change it to:
function niv(id)
{
var isCheck = $("input:checkbox[value='" + id + "']").is(':checked');
$('#'+id).prop("disabled", !isCheck);
$('#p'+id).prop("disabled", !isCheck);
}
Another possible solution is to pass the this value to the niv function in the call:
onclick="niv(this)"
And so the new niv function will be:
function niv(obj)
{
$('#'+obj.value).prop("disabled", !obj.checked);
$('#p'+obj.value).prop("disabled", !obj.checked);
}
My snippet:
function niv(id)
{
var isCheck = $("input:checkbox[value='" + id + "']").is(':checked');
$('#'+id).prop("disabled", !isCheck);
$('#p'+id).prop("disabled", !isCheck);
}
<script src="http://code.jquery.com/jquery-1.11.3.js"></script>
<table>
<tr class="even">
<td>225/45/17</td>
<td id=Bridgestone>Bridgestone</td>
<td>Putenza <h6>91y</h6></td>
<td><input type="text" id="p21" name="price[]" value="" disabled="disabled" /> <br /><small>מחיר מומלץ: 650</small> ₪</td>
<td><input type="checkbox" name="check[]" value="21" onclick="niv(21)"></td>
<td><input type="text" id="21" name="counts[]" disabled="disabled" /><small> מתוך 4 במלאי</small></td>
</tr><tr class="even">
<td>225/45/19</td>
<td id=Bridgestone>Bridgestone</td>
<td>Putenza <h6>96w</h6></td>
<td><input type="text" id="p20" name="price[]" value="" disabled="disabled" /> <br /><small>מחיר מומלץ: 1100</small> ₪</td>
<td><input type="checkbox" name="check[]" value="20" onclick="niv(20)"></td>
<td><input type="text" id="20" name="counts[]" disabled="disabled" /><small> מתוך 4 במלאי</small></td>
</tr><tr class="even">
<td>225/55/17</td>
<td id=Bridgestone>Bridgestone</td>
<td>Turanza runflat <h6>97y</h6></td>
<td><input type="text" id="p18" name="price[]" value="" disabled="disabled" /> <br /><small>מחיר מומלץ: 850</small> ₪</td>
<td><input type="checkbox" name="check[]" value="18" onclick="niv(18)"></td>
<td><input type="text" id="18" name="counts[]" disabled="disabled" /><small> מתוך 9 במלאי</small></td>
</tr><tr class="even">
<td>225/55/18</td>
<td id=Bridgestone>Bridgestone</td>
<td>t001 <h6>98v</h6></td>
<td><input type="text" id="p19" name="price[]" value="" disabled="disabled" /> <br /><small>מחיר מומלץ: 550-600</small> ₪</td>
<td><input type="checkbox" name="check[]" value="19" onclick="niv(19)"></td>
<td><input type="text" id="19" name="counts[]" disabled="disabled" /><small> מתוך 4 במלאי</small></td>
</tr><tr class="even">
<td>255/50/20</td>
<td id=Bridgestone>Bridgestone</td>
<td>Hp Sport <h6>109v</h6></td>
<td><input type="text" id="p14" name="price[]" value="" disabled="disabled" /> <br /><small>מחיר מומלץ: 850</small> ₪</td>
<td><input type="checkbox" name="check[]" value="14" onclick="niv(14)"></td>
<td><input type="text" id="14" name="counts[]" disabled="disabled" /><small> מתוך 4 במלאי</small></td>
</tr>
</table>
Use the change() event listener, it's better for this purpose.
As the checkbox is in a table, I've just found the parent <tr> and then found all the text inputs within that row.
$('input[type="checkbox"]').change(function () {
$(this).closest('tr').find('input[type="text"]').attr("disabled", !this.checked);
})
You'll notice that this does away with the inline call to JavaScript, abstracting your JS code from your HTML. It also means that you don't need to be concerned with IDs and making sure they are sensible - possibly reducing BE workload and making everything more simple.
The reason that your code didn't work - and more specifically why it required two clicks is as follows:
You have an inline click event - which then calls a function to set a listener. Only when your inline click is called, is the listener applied.
The second time you click the new listener - with your logic - has been created, which means that it's used.
Additionally, every time you click on this checkbox element, you create a new listener - which means that within a couple of clicks, there is a big list of duplicated event listeners.
jsFiddle example: https://jsfiddle.net/likestothink/kgL4q0jg/
This is a work in progress (a calculator and some other stuff), but what I'm trying to do at the moment is whenever you type in some number into the results of the calculator, and you press "+" the onclick will call checkValidity which will determine if what you typed in was integer or not integer. It will send an alert saying integer or not an integer. My issue is that the onclick won't do anything. I tried emptying the checkValidity function of everything but alert("test); and it still won't work. Could someone please explain what I'm doing wrong?
<!DOCTYPE html>
<html>
<head>
<script type="text/javascript>">
function checkValidity()
{
var Calculator = document.getElementById("Calculator")
if (Calculator.Result.value === parseInt(test, 10))
{
alert("Integer!");
}
else
{
alert("Not an integer, press C");
}
}
</script>
<form name="Calculator">
First name:
<br>
<input type="text" name="firstname">
<br>
Last name:
<br>
<input type="text" name="lastname">
<br>
Student ID:
<br>
<input type="text" name="ID">
<br>
Biography:
<br>
<textarea maxlength=30 rows="2" cols="30">
</textarea>
<br>
Result:
<table border="1" style="width:100%">
<input type="text" name="Result" size="12">
<tr>
<td><Input type="button" Name="zero" Value="0" OnClick="Calculator.Result.value += '0'"> </td>
<td><Input type="button" Name="one" Value="1" OnClick="Calculator.Result.value += '1'"></td>
<td><Input type="button" Name="two" Value="2" OnClick="Calculator.Result.value += '2'"></td>
<td><Input type="button" Name="three" Value="3" OnClick="Calculator.Result.value += '3'"></td>
</tr>
<tr>
<td><Input type="button" Name="four" Value="4" OnClick="Calculator.Result.value += '4'"></td>
<td><Input type="button" Name="five" Value="5" OnClick="Calculator.Result.value += '5'"></td>
<td><Input type="button" Name="six" Value="6" OnClick="Calculator.Result.value += '6'"></td>
<td><Input type="button" Name="seven" Value="7" OnClick="Calculator.Result.value += '7'"></td>
</tr>
<tr>
<td><Input type="button" Name="eight" Value="8" OnClick="Calculator.Result.value += '8'"></td>
<td><Input type="button" Name="nine" Value="9" OnClick="Calculator.Result.value += '9'"></td>
<td><Input type="button" Name="plus" Value="+" OnClick="checkValidity()"></td>
<td><Input type="button" Name="minus" Value="-" OnClick="Calculator.Result.value += '-'"></td>
</tr>
<tr>
<td><Input type="button" Name="equals" Value="=" OnClick="Calculator.Result.value = eval(Calculator.Result.value)"></td>
<td><Input type="button" Name="divide" Value="/" OnClick="Calculator.Result.value += '/'"></td>
<td><Input type="button" Name="multiply" Value="*" OnClick="Calculator.Result.value += '*'"></td>
<td><Input type="button" Name="clear" Value="C" OnClick="Calculator.Result.value = ''"></td>
</tr>
</table>
<span id="HoursWorkedThisWeek"></span>
<Input type="button" Name="Save" Value="Save" OnClick="Calculator.HoursWorkedThisWeek = Calculator.Result.value">
<Input type="button" Name="Submit" Value="Submit">
</form>
</head>
</html>
try this it worked
<!DOCTYPE html>
<html>
<head>
</head>
<body>
<form id="Calculator" name="Calculator">
First name:
<br>
<input type="text" name="firstname">
<br>
Last name:
<br>
<input type="text" name="lastname">
<br>
Student ID:
<br>
<input type="text" name="ID">
<br>
Biography:
<br>
<textarea maxlength=30 rows="2" cols="30">
</textarea>
<br>
Result:
<table border="1" style="width:100%">
<input type="text" name="Result" size="12">
<tr>
<td><Input type="button" Name="zero" Value="0" OnClick="Calculator.Result.value += '0'"> </td>
<td><Input type="button" Name="one" Value="1" OnClick="Calculator.Result.value += '1'"></td>
<td><Input type="button" Name="two" Value="2" OnClick="Calculator.Result.value += '2'"></td>
<td><Input type="button" Name="three" Value="3" OnClick="Calculator.Result.value += '3'"></td>
</tr>
<tr>
<td><Input type="button" Name="four" Value="4" OnClick="Calculator.Result.value += '4'"></td>
<td><Input type="button" Name="five" Value="5" OnClick="Calculator.Result.value += '5'"></td>
<td><Input type="button" Name="six" Value="6" OnClick="Calculator.Result.value += '6'"></td>
<td><Input type="button" Name="seven" Value="7" OnClick="Calculator.Result.value += '7'"></td>
</tr>
<tr>
<td><Input type="button" Name="eight" Value="8" OnClick="Calculator.Result.value += '8'"></td>
<td><Input type="button" Name="nine" Value="9" OnClick="Calculator.Result.value += '9'"></td>
<td><Input type="button" Name="plus" Value="+" OnClick="checkValid()"></td>
<td><Input type="button" Name="minus" Value="-" OnClick="Calculator.Result.value += '-'"></td>
</tr>
<tr>
<td><Input type="button" Name="equals" Value="=" OnClick="Calculator.Result.value = eval(Calculator.Result.value)"></td>
<td><Input type="button" Name="divide" Value="/" OnClick="Calculator.Result.value += '/'"></td>
<td><Input type="button" Name="multiply" Value="*" OnClick="Calculator.Result.value += '*'"></td>
<td><Input type="button" Name="clear" Value="C" OnClick="Calculator.Result.value = ''"></td>
</tr>
</table>
<span id="HoursWorkedThisWeek"></span>
<Input type="button" Name="Save" Value="Save" OnClick="Calculator.HoursWorkedThisWeek = Calculator.Result.value">
<Input type="button" Name="Submit" Value="Submit">
</form>
<script type="text/JavaScript">
function checkValid()
{
var Calculator = document.getElementById("Calculator")
var test =Calculator[4].value;
if (parseInt(Calculator[4].value) === parseInt(test, 10))
{
alert("Integer!");
}
else
{
alert("Not an integer, press C");
}
}
</script>
</body>
</html>
You made a few small mistakes that caused your code to not work.
I'll explain them after this working example:
function validate() {
if (Calculator.Result.value == parseInt(Calculator.Result.value,10)) {
alert("Integer!");
} else {
alert("Not an integer, press C");
}
}
<body>
<form name="Calculator">
First name: <br /><input type="text" name="firstname" /><br />
Last name: <br /><input type="text" name="lastname" /><br />
Student ID: <br /><input type="text" name="ID" /><br />
Biography: <br /><textarea maxlength=30 rows="2" cols="30"></textarea><br />
Result:
<table border="1" style="width:100%;">
<input type="text" name="Result" size="12" />
<tr>
<td><input type="button" name="zero" value="0" onclick="Calculator.Result.value += '0'" /> </td>
<td><input type="button" name="one" value="1" onclick="Calculator.Result.value += '1'" /></td>
<td><input type="button" name="two" value="2" onclick="Calculator.Result.value += '2'" /></td>
<td><input type="button" name="three" value="3" onclick="Calculator.Result.value += '3'" /></td>
</tr>
<tr>
<td><input type="button" name="four" value="4" onclick="Calculator.Result.value += '4'" /></td>
<td><input type="button" name="five" value="5" onclick="Calculator.Result.value += '5'" /></td>
<td><input type="button" name="six" value="6" onclick="Calculator.Result.value += '6'" /></td>
<td><input type="button" name="seven" value="7" onclick="Calculator.Result.value += '7'" /></td>
</tr>
<tr>
<td><input type="button" name="eight" value="8" onclick="Calculator.Result.value += '8'" /></td>
<td><input type="button" name="nine" value="9" onclick="Calculator.Result.value += '9'" /></td>
<td><input type="button" name="plus" value="+" onclick="validate()" /></td>
<td><input type="button" name="minus" value="-" onclick="Calculator.Result.value += '-'" /></td>
</tr>
<tr>
<td><input type="button" name="equals" value="=" onclick="Calculator.Result.value = eval(Calculator.Result.value)" /></td>
<td><input type="button" name="divide" value="/" onclick="Calculator.Result.value += '/'" /></td>
<td><input type="button" name="multiply" value="*" onclick="Calculator.Result.value += '*'" /></td>
<td><input type="button" name="clear" value="C" onclick="Calculator.Result.value = ''" /></td>
</tr>
</table>
<span id="HoursWorkedThisWeek"></span>
<input type="button" name="Save" value="Save" onclick="Calculator.HoursWorkedThisWeek = Calculator.Result.value" />
<input type="button" name="Submit" value="Submit" />
</form>
</body>
(fiddle: http://jsfiddle.net/z8umk2c6/6/)
You had all your elements inside the <head> tag. Only the <script> should be inside the head (or better yet, in a separate JS-file), all the HTML elements should be inside a <body> tag.
Your form didn't have an id, only a name. Therefor the variable Calculator (bad practice to use uppercase for variable-names) referred to nothing. In your case you don't even need the variable, because you just access the form by name directly, so I removed that variable at the start of the function.
(I recommend using ID's instead of names however, but that might just be personal preference.)
The === in the if-clause didn't work, it was too strict. == will work however.
"test" in the if-clause was nothing, it had no value. I rewrote the if-clause so that the value is checked against the integer-value of itself. If that integer-value is equals the original value, you know the original was an integer already.
And a few other mistakes that may or may not break the code, but were bad practice non the less:
OnClick should be onclick (all lowercase). Same goes for Name and Value.
Some <input> were written with an uppercase: <Input>.
<br> and <input> need their own closing tags, like so: <br /> and <input />
I'm trying to write a kiosk-style web app for iOS. I've created some buttons, which their only purpose is to insert some text into an input box, and everything seems fine. The problem is it's very very slow on the iPad itself.
Here's the function:
function addCode(key1){
var input1 = document.getElementById("productid");
input1.value += key1;
}
This is the input box:
<input type="text" id="productid" name="productid" placeholder="Product ID" readonly="true">
And here's how I call the function:
<input type="button" value="GEN" onclick="addCode('GEN');">
I'm not sure what's the problem here. As I've said, this works fine on my computer, but not on the iPad...
Thanks in Advance!
EDIT: Here's the complete code for the page
<!DOCTYPE HTML>
<html>
<head>
<title>Find a Product</title>
<link rel="stylesheet" href="fonts/mainfont.css">
<link rel="stylesheet" href="css/main.css">
<meta charset="UTF-8">
<script src="js/jquery.js"></script>
<meta name="apple-mobile-web-app-capable" content="yes">
<meta name="viewport" content="user-scalable=no, width=device-width" />
<script>
function addCode(key1){
var input1 = document.getElementById("productid");
input1.value += key1;
}
function emptyCode(){
var input2 = document.getElementById("productid");
input2.value = "";
}
</script>
</head>
<body oncontextmenu="return false">
<div align="center">
<div id="find">
<form action="find_product.php" method="POST">
<fieldset>
<p><input type="text" id="productid" name="productid" placeholder="Product ID" readonly="true"></p>
<br />
<table border="0" width="320px">
<!--Row-->
<tr>
<td width="100px">
<p><input type="button" value="GEN" onclick="addCode('GEN');"></p>
</td>
<td width="10px"></td>
<td width="100px">
<p><input type="button" value="TST" onclick="addCode('TST');"></p>
</td>
<td width="10px"></td>
<td width="100px">
<p><input type="button" value="CSU" onclick="addCode('CSU');"></p>
</td>
</tr>
<!--EndRow-->
<!--Row-->
<tr>
<td width="100px">
<p><input type="button" value="1" onclick="addCode('1');"></p>
</td>
<td width="10px"></td>
<td width="100px">
<p><input type="button" value="2" onclick="addCode('2');"></p>
</td>
<td width="10px"></td>
<td width="100px">
<p><input type="button" value="3" onclick="addCode('3');"></p>
</td>
</tr>
<!--EndRow-->
<!--Row-->
<tr>
<td width="100px">
<p><input type="button" value="4" onclick="addCode('4');"></p>
</td>
<td width="10px"></td>
<td width="100px">
<p><input type="button" value="5" onclick="addCode('5');"></p>
</td>
<td width="10px"></td>
<td width="100px">
<p><input type="button" value="6" onclick="addCode('6');"></p>
</td>
</tr>
<!--EndRow-->
<!--Row-->
<tr>
<td width="100px">
<p><input type="button" value="7" onclick="addCode('7');"></p>
</td>
<td width="10px"></td>
<td width="100px">
<p><input type="button" value="8" onclick="addCode('8');"></p>
</td>
<td width="10px"></td>
<td width="100px">
<p><input type="button" value="9" onclick="addCode('9');"></p>
</td>
</tr>
<!--EndRow-->
<!--Row-->
<tr>
<td width="100px">
<p><input type="button" value="Clear" onclick="emptyCode();"></p>
</td>
<td width="10px"></td>
<td width="100px">
<p><input type="button" value="0" onclick="addCode('0');"></p>
</td>
<td width="10px"></td>
<td width="100px">
</td>
</tr>
<!--EndRow-->
</table>
<br />
<p><input type="submit" value="Find"></p>
</fieldset>
</form>
</div>
<!-- end login -->
</div>
</body>
</html>