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
Related
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>
The below code is used to add new row to the table, also multiply two fields and show the result in the final field, in this dynamically generated row and at last part of code, removes the added row if it is not needed.
<script type="text/javascript">
$(window).load(function(){
$('.add-box').click(function() {
var box_html = $('<tr class="multLote"><td align="center"><input type="text" name="lote[]" value="0" style="width:15%;font-weight:bold;" /></td> ' +
'<td><textarea name="lote100[]" value="0" style="height:25px;font-size:10pt;width:60;font-weight:bold;" class="val100" > </textarea></td>' +
'<td><input type="text" name="lote20[]" value="0" class="val20" /></td>' +
'<td><input type="text" name="lote10[]" value="0" class="val10" /></td>' +
'<td><input type="text" disabled name="lote_result[]" class="lote_result" value="0"></td>' +
'<th>Remover</th></tr>');
$('#tabela-lotes tbody').append(box_html);
return false;
});
$('#tabela-lotes').on("keyup", ".multLote input", function() {
var mult = 0;
// for each row:
console.log($(this).closest('table').find("tr.multLote").length);
$(this).closest('tr.multLote').each(function() {
// get the values from this row:
var $val20 = $('.val20', this).val();
var $val10 = $('.val10', this).val();
console.log($val100);
var $total = ($val20 * $val10);
console.log($total);
// set total for the row
$('.lote_result', this).val($total);
mult += $total;
});
});
$('#tabela-lotes').on('click', '.remove-box', function(e) {
e.preventDefault();
$(this).closest('tr.multLote').remove();
});
});
</script>
This is the html code.
<form action="tabledb.php" method="POST">
<body>
<input type="button" class="add-box" value="Add">
<table id="tabela-lotes">
<thead>
<tr>
<th>
SL. NO
</th>
<th>
PRODUCT NAME
</th>
<th>
RATE PER CB
</th>
<th>
CBs
</th>
<th>
AMOUNT
</th>
</tr>
</thead>
<tbody><tr class="multLote">
<td align="center">
<input type="text" name="lote[]" value="0" style="width:15%;font-weight:bold;">
</td>
<td>
<textarea name="lote100[]" style="height:25px;font-size:10pt;width:60;font-weight:bold;" class="val100" value="0"> </textarea>
</td>
<td>
<input type="text" name="lote20[]" class="val20" value="0">
</td>
<td>
<input type="text" name="lote10[]" class="val10" value="0">
</td>
<td>
<input type="text" disabled="" name="lote_result[]" class="lote_result" value="0">
</td>
</tr>
</tbody></table>
<table>
<tr><th>
Total CBS :</th>
<td> <input type="text" name="total_cbs" id="total_cbs" placeholder="Total CBS" style="height:25px;font-weight:bold;" onfocus="cal1()" readonly ></td></tr>
<tr><th>Total AMOUNT : </th>
<td><input type="text" name="total" id="total" placeholder="Total Rs." style="height:25px;font-weight:bold;" onfocus="cal2('.$i.')" readonly></td></tr>
</table>
<input type="submit" value="submit">
</form>
I want to the get the total coloumn sum of lote10[ ] and lote_result[ ] fields to be displayed in the total_cbs and total fields respectively.Please help, Thank you in advance.
enter image description here
I have updated my question with the image of the output, which states exactly what i need, Thank You.
Assuming the end result looks like this:
var result = 0;
var elements = document.getElementsByTagName("table")[0].getElementsByTagName("tr");
for (var i = elements.length - 1; i > elements.length - 3; i--) {
var inputs = elements[i].getElementsByTagName('input');
result += parseInt(inputs[inputs.length - 1].value);
}
console.log('total', result);
alert('total ' + result);
<table>
<tbody>
<tr class="multLote">
<td align="center">
<input type="text" name="lote[]" value="0" style="width:15%;font-weight:bold;">
</td>
<td>
<textarea name="lote100[]" value="0" style="height:25px;font-size:10pt;width:60;font-weight:bold;" class="val100"></textarea>
</td>
<td>
<input type="text" name="lote20[]" value="0" class="val20">
</td>
<td>
<input type="text" name="lote10[]" value="0" class="val10">
</td>
<td>
<input type="text" disabled="" name="lote_result[]" class="lote_result" value="7">
</td>
<th>Remover
</th>
</tr>
<tr class="multLote">
<td align="center">
<input type="text" name="lote[]" value="0" style="width:15%;font-weight:bold;">
</td>
<td>
<textarea name="lote100[]" value="0" style="height:25px;font-size:10pt;width:60;font-weight:bold;" class="val100"></textarea>
</td>
<td>
<input type="text" name="lote20[]" value="0" class="val20">
</td>
<td>
<input type="text" name="lote10[]" value="0" class="val10">
</td>
<td>
<input type="text" disabled="" name="lote_result[]" class="lote_result" value="7">
</td>
<th>Remover
</th>
</tr>
<tr class="multLote">
<td align="center">
<input type="text" name="lote[]" value="0" style="width:15%;font-weight:bold;">
</td>
<td>
<textarea name="lote100[]" value="0" style="height:25px;font-size:10pt;width:60;font-weight:bold;" class="val100"></textarea>
</td>
<td>
<input type="text" name="lote20[]" value="0" class="val20">
</td>
<td>
<input type="text" name="lote10[]" value="0" class="val10">
</td>
<td>
<input type="text" disabled="" name="lote_result[]" class="lote_result" value="7">
</td>
<th>Remover
</th>
</tr>
<tr class="multLote">
<td align="center">
<input type="text" name="lote[]" value="0" style="width:15%;font-weight:bold;">
</td>
<td>
<textarea name="lote100[]" value="0" style="height:25px;font-size:10pt;width:60;font-weight:bold;" class="val100"></textarea>
</td>
<td>
<input type="text" name="lote20[]" value="0" class="val20">
</td>
<td>
<input type="text" name="lote10[]" value="0" class="val10">
</td>
<td>
<input type="text" disabled="" name="lote_result[]" class="lote_result" value="7">
</td>
<th>Remover
</th>
</tr>
<tr class="multLote">
<td align="center">
<input type="text" name="lote[]" value="0" style="width:15%;font-weight:bold;">
</td>
<td>
<textarea name="lote100[]" value="0" style="height:25px;font-size:10pt;width:60;font-weight:bold;" class="val100"></textarea>
</td>
<td>
<input type="text" name="lote20[]" value="0" class="val20">
</td>
<td>
<input type="text" name="lote10[]" value="0" class="val10">
</td>
<td>
<input type="text" disabled="" name="lote_result[]" class="lote_result" value="7">
</td>
<th>Remover
</th>
</tr>
</tbody>
</table>
JSFIDDLE
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>
its a calculator in html5 and js.
after any operation if i press any button number it will be added to the end of the answer, if the operation is (2+2) the answer will be (4) if i press (5) button to do another operation it will be add to the end of 4 (45)
how can i reset the input box if an operation is already done and another one is started?
this is my code
<title>Untitled Document</title>
<style type="text/css">
.border-style{
border: hidden;
}
.input-style{
width:100%;
height:38px;
}
</style>
</head>
<body>
<form name="calc">
<table border=3 align="center" width="40%" style="border:solid" >
<tr>
<td colspan="5" height="40px" width="71%" class="border-style">
<input id="input" type="text" name="Num" value="0" style="width:98%; height:20px" />
</td>
<td align="center" width="14.2%" class="border-style">
<input type="button" value="C" onclick="deleteDigit(this.form.Num)" class="input-style" />
</td>
<td align="center" width="14.2%" class="border-style">
<input type="button" value="CE" onclick="document.calc.Num.value = ' ' " class="input-style" />
</td>
</tr>
<tr>
<td height="40px" width="14.2%" class="border-style">
<input type="button" value="x^y" onclick="power(this.form)" class="input-style" />
</td>
<td height="40px" width="14.2%" class="border-style">
<input type="button" value="Sin" onclick="sin(this.form)"class="input-style" />
</td>
<td height="40px" width="14.2%" class="border-style">
<input type="button" value="7" onclick="document.calc.Num.value += '7'" class="input-style" />
</td>
<td height="40px" width="14.2%" class="border-style">
<input type="button" value="8" onclick="document.calc.Num.value += '8'" class="input-style" />
</td>
<td height="40px" width="14.2%" class="border-style">
<input type="button" value="9" onclick="document.calc.Num.value += '9'" class="input-style" />
</td>
<td height="40px" width="14.2%" class="border-style">
<input type="button" value="+/-"onclick="flipSign(this.form.Num)" class="input-style" />
</td>
<td height="40px" width="14.2%" class="border-style">
<input type="button" value="mod"onclick="document.calc.Num.value +='%'" class="input-style"/>
</td>
</tr>
<tr>
<td height="40px" width="14.2%" class="border-style">
<input type="button" value="root" onclick="sqrt(this.form)" class="input-style"/>
</td>
<td height="40px" width="14.2%" class="border-style">
<input type="button" value="cos" onclick="cos(this.form)" class="input-style" />
</td>
<td height="40px" width="14.2%" class="border-style">
<input type="button" value="4" onclick="document.calc.Num.value +='4'" class="input-style" />
</td>
<td height="40px" width="14.2%" class="border-style">
<input type="button" value="5"onclick="document.calc.Num.value +='5'" class="input-style" />
</td>
<td height="40px" width="14.2%" class="border-style">
<input type="button" value="6"onclick="document.calc.Num.value +='6'" class="input-style" />
</td>
<td height="40px" width="14.2%" class="border-style">
<input type="button" value="+"onclick="document.calc.Num.value +='+'" class="input-style" />
</td>
<td height="40px" width="14.2%" class="border-style">
<input type="button" value="-"onclick="document.calc.Num.value +='-'" class="input-style" />
</td>
</tr>
<tr>
<td height="40px" width="14.2%" class="border-style">
<input type="button" value="n!"onclick="factorial(this.form)" class="input-style"/>
</td>
<td height="40px" width="14.2%" class="border-style">
<input type="button" value="tan"onclick="tan(this.form)" class="input-style" />
</td>
<td height="40px" width="14.2%" class="border-style">
<input type="button" value="1"onclick="document.calc.Num.value +='1'" class="input-style" />
</td>
<td height="40px" width="14.2%" class="border-style">
<input type="button" value="2"onclick="document.calc.Num.value +='2'" class="input-style" />
</td>
<td height="40px" width="14.2%" class="border-style">
<input type="button" value="3"onclick="document.calc.Num.value +='3'" class="input-style" />
</td>
<td height="40px" width="14.2%" class="border-style">
<input type="button" value="*"onclick="document.calc.Num.value +='*'" class="input-style" />
</td>
<td height="40px" width="14.2%" class="border-style">
<input type="button" value="/"onclick="document.calc.Num.value +='/'" class="input-style" />
</td>
</tr>
<tr>
<td height="40px" width="14.2%" class="border-style">
<input type="button" value="fib"onclick="fib(this.form)" class="input-style" />
</td>
<td height="40px" width="14.2%" class="border-style">
<input type="button" value="log"onclick="lg(this.form)" class="input-style" />
</td>
<td height="40px" width="14.2%" class="border-style">
<input type="button" value="0"onclick="document.calc.Num.value +='0'" class="input-style" />
</td>
<td height="40px" width="14.2%" class="border-style">
<input type="button" value="." onclick="document.calc.Num.value +='.'" class="input-style" />
</td>
<td height="40px" width="14.2%" class="border-style">
<input type="button" value="10^x" onclick="powerten(this.form)" class="input-style" />
</td>
<td height="40px" width="14.2%" class="border-style">
<input type="button" value="Ans" onclick="SaveANS()" class="input-style" />
</td>
<td height="40px" width="14.2%" class="border-style">
<input type="button" value="=" onclick="equal(this.form)" class="input-style" />
</td>
</tr>
</table>
<script type="text/javascript" >
// saving Ans
var Ans=0;
// Delete last digit entered
function deleteDigit(Num) {
Num.value = Num.value.substring(0, Num.value.length - 1)
}
// Power Function
function power(n){
if (n.Num.value != "" && n.Num.value != 0 ){
var p=prompt("Enter the power:")
n.Num.value = Math.pow(n.Num.value,p)
Ans=n.Num.value;
}
else
alert("Enter a number first")
}
// sin Function
function sin(n) {
n.Num.value = Math.sin(n.Num.value);
Ans=n.Num.value;
}
// Flips the sign of the value
function flipSign(Num) {
if(Num.value.substring(0, 1) == "-")
Num.value = Num.value.substring(1, Num.value.length)
else
Num.value = "-" + Num.value
}
// Square root Function
function sqrt(n) {
if (n.Num.value != "" && n.Num.value != 0 ){
var p=prompt("Enter the root:")
p=1/p;
n.Num.value = Math.pow(n.Num.value,p)
Ans=n.Num.value;
}
else
alert(" please input the nuber first !!!")
}
// cos Function
function cos(n) {
n.Num.value = Math.cos(n.Num.value);
Ans=n.Num.value;
}
// Factorial Function
function factorial(n){
var var1, var2;
var1=1;
var2=1;
var x=n.Num.value;
do {
var1=var1*var2;
var2=1+var2;
}while(var2<=x);
n.Num.value =var1;
Ans=var1;
}
// tan Function
function tan(n) {
n.Num.value = Math.tan(n.Num.value);
Ans=n.Num.value;
}
// Fibonacci Function
function fib(n){
var var1=0;
var var2=1;
var result;
var x= n.Num.value;
for ( var i=1 ; i<x ; i++){
result=var1+var2;
var1=var2;
var2=result;
}
n.Num.value =result;
Ans=result;
}
// Log Function
function lg(form) {
n.Num.value = Math.log(n.Num.value);
Ans=n.Num.value;
}
// 10^powr Function
function powerten(n) {
var x=n.Num.value;
n.Num.value = Math.pow(10,x)
Ans=n.Num.value;
}
function equal(n){
var var1=eval(document.getElementById("input").value);
result = eval(var1) ;
document.getElementById("input").value = result ;
Ans=result;
}
function SaveANS(){
document.getElementById("input").value =Ans;
}
</script>
</form>
</body>
</html>
They must press the equal sign button in order to get an answer, correct?
Have a flag (a boolean variable, perhaps on the global scope) that is set to true when the equal sign is pressed (or the form is "submitted" if you're using the submit event correctly). Then, on any subsequent button click, if that flag is true, clear the input box before executing the normal routine–taking care to set the flag back to false, of course.
You may also want to ensure that your HTML is valid (starting and ending html and body tags, html5 doctype, etc.)