Добавление кнопки процента в калькулятор 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

Калькулятор, приведенный выше, мне не подходит.
Тем не менее, я могу дать пару советов, которые, думаю, помогут вам в дальнейшем.

А) Пожалуйста, не поймите меня неправильно. Частью программирования является решение проблем, с которыми вы сталкиваетесь, — в этом и есть удовольствие. Получает больше удовольствия, когда вы находитесь под давлением сроков.

Б) Я бы рекомендовал использовать 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