Добавяне на бутон за процент към javascript калкулатора

Работя върху програма за калкулатор, за да практикувам и да помагам при изучаването на javascript. Имам това досега:

<!DOCtype html PUBLIC "-//W3C//Dtd XHTML 1.0 transitional//EN" "http://www.w3.org/tr/xhtml1/Dtd/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">

<head>
<meta content="text/html; charset=utf-8" http-equiv="Content-type" />
<title>Calculator</title>
<h1><center>On-Line Calculator</center></h1>
<script LANGUAGE="Javascript">
function addChar(input, character) {
	if(input.value == null || input.value == "0")
		input.value = character
	else
		input.value += character
}

function sqrt(form) {
	form.display.value = Math.sqrt(form.display.value);
}

function changeSign(input) {
	if(input.value.substring(0, 1) == "-")
		input.value = input.value.substring(1, input.value.length)
	else
		input.value = "-" + input.value
}

function compute(form) {
	form.display.value = eval(form.display.value)
}

function checkNum(str) {
	for (var i = 0; i < str.length; i++) {
		var ch = str.substring(i, i+1)
		if (ch < "0" || ch > "9") {
			if (ch != "/" && ch != "*" && ch != "+" && ch != "-" && ch != "."
				&& ch != "(" && ch!= ")") {
				alert("invalid entry!")
				return false
				}
			}
		}
		return true
}
</script>
</head>
<body>
	<form name="sci-calc">
		<table  border="2"CELLSPACING="1" CELLPADDING="5" align="center" >
		<tr>
			<td COLSPAN="3" align="center"><input name="display" value="0" SIZE="28" MAXLENGTH="25"></td>
			<td align="center" colspan="1" ><input type="button" value="  %  " ONCLICK="addChar(this.form.display, '%')" style="width: 135px"></td>

		</tr>
		<tr>
			<td align="center" colspan="1" ><input type="button" value="  7  " ONCLICK="addChar(this.form.display, '7')" style="width: 135px"></td>
			<td align="center" colspan="1" ><input type="button" value="  8  " ONCLICK="addChar(this.form.display, '8')" style="width: 136px" ></td>
			<td align="center"colspan="1"><input type="button" value="  9  " ONCLICK="addChar(this.form.display, '9')" style="width: 135px" ></td>
			<td align="center"colspan="1"><input type="button" value="   +  " ONCLICK="addChar(this.form.display, '+')" style="width: 137px"></td>
		</tr>
		<tr>
			<td align="center"colspan="1"><input type="button" value="  4  " ONCLICK="addChar(this.form.display, '4')" style="width: 133px"></td>
			<td align="center" colspan="1"><input type="button" value="  5  " ONCLICK="addChar(this.form.display, '5')" style="width: 131px"></td>
			<td align="center"colspan="1"><input type="button" value="  6  " ONCLICK="addChar(this.form.display, '6')" style="width: 134px"></td>
			<td align="center"colspan="1"><input type="button" value="   -   " ONCLICK="addChar(this.form.display, '-')" style="width: 139px"></td>
		</tr>
		<tr>
			<td align="center"colspan="1" ><input type="button" value="  1  " ONCLICK="addChar(this.form.display, '1')" style="width: 133px"></td>
			<td align="center" colspan="1"><input type="button" value="  2  " ONCLICK="addChar(this.form.display, '2')" style="width: 128px"></td>
			<td align="center"colspan="1"><input type="button" value="  3  " ONCLICK="addChar(this.form.display, '3')" style="width: 132px"></td>
			<td align="center"colspan="1"><input type="button" value="   *   " ONCLICK="addChar(this.form.display, '*')" style="width: 137px"></td>
		</tr>
		<tr>
			<td align="center"colspan="1"><input type="button" value="  0  " ONCLICK="addChar(this.form.display, '0')" style="width: 131px"></td>
			<td align="center" ><input type="button" value="   .  " ONCLICK="addChar(this.form.display, '.')" style="width: 129px"></td>
			<td align="center"><input type="button" value=" sqrt " ONCLICK="if (checkNum(this.form.display.value)) { sqrt(this.form) }" style="width: 136px"></td>
			<td align="center"><input type="button" value="   /   " ONCLICK="addChar(this.form.display, '/')" style="width: 139px"></td>
		</tr>
		<tr>
			<td align="center" ><input type="button" value="    (    " ONCLICK="addChar(this.form.display, '(')" style="width: 131px"></td>
			<td align="center" ><input type="button" value="   )   " ONCLICK="addChar(this.form.display, ')')" style="width: 132px"></td>
			<td align="center" ><input type="button" value="=" name="enter" ONCLICK="if (checkNum(this.form.display.value)) { compute(this.form) }" style="width: 141px"></td>
			<td align="center" ><input type="button" value="clear" ONCLICK="this.form.display.value = 0 " style="width: 141px"></td>
		</tr>
		</table>
	</form>
</html>

Имам няколко въпроса:

  1. Имам нужда от работещ бутон за проценти, този, който имам сега, не прави това, което трябва. Трябва да показва колко процента е първото въведено число от второто. т.е. ако първото число е 5, а второто е 20, тогава резултатът трябва да бъде 25 (което означава 25 %).
  2. Трябва да покажа всички въведени операции, а не само резултатите от изчисленията, извършени от потребителя. Например, на 3+4, вместо просто да покажете "7", покажете "3 + 4 = 7". Запазете показването на всички предишни изчисления в полето за въвеждане, вместо само текущото.

Може ли някой да ми помогне тук? Благодаря!


javascript calculator
person Tyler Klimek    schedule 10.12.2014    source източник
comment
Предполагам, че вашето процентно изчисление не работи, защото уравнението 5 % 20 се чете като five modulo twenty. За последното просто или запишете всеки вход в променлива, или го извлечете от полето за въвеждане с помощта на .value (ако математиката трябва да е видима, в момента не е).   -  person John Weisz    schedule 11.12.2014

Отговори (1)


arrow_upward
0
arrow_downward

Калкулаторът по-горе изглежда не работи за мен.
Мога обаче да направя няколко предложения, които мисля, че ще ви помогнат много.

A) Моля, не приемайте това по грешен начин. Част от програмирането е разрешаването на проблемите, които имате - това е забавлението. Става по-забавно, когато сте под натиска на крайните срокове.

B) Бих препоръчал използването на jQuery. По същество ще научите javascript.

C) И накрая, използвайте тагове div, за да запишете валидираното натискане на клавиш, за да прочетете от това, разделяйки стойностите по оператори.

eg: 

calculation=$('#output_div_id').val();
calculation_parts = calculation.split('+');
answer = parseInt(calculation_part[0]) + parseInt(calculation_part[1]).

$('#output_div_id').html($('#output_div_id').html()+ "=" + answer);

Надявам се, че това помага - успех с изучаването на Java

person terary    schedule 11.12.2014