Javascript-форум - Калькулятор выдает NaN

Javascript-форум (https://javascript.ru/forum/)

- Общие вопросы Javascript (https://javascript.ru/forum/misc/)

- - Калькулятор выдает NaN (https://javascript.ru/forum/misc/71443-kalkulyator-vydaet-nan.html)

Калькулятор выдает NaN

Всем добрый вечер!
Помогите, кто чем может неопытному(

Пишу свой первый мини-проект "Калькулятор"
Проблема, что если алертом выводить результаты операций - выдает числа, если эти результаты записывать в $('#display').text() - выдает NaN

Подскажите на что обратить внимание(

<div id = "case">
			<div id = "screen"><p id = "display"></p></div>
			<div id = "buttons">
				<ul class = "row-first">
					<li><input id = 'reset' type = 'submit' value = 'R'/></li>
				</ul>
				<ul class = "row">
					<li><input class = 'btn' type = 'submit' value = '1'/></li>
					<li><input class = 'btn' type = 'submit' value = '2'/></li>
					<li><input class = 'btn' type = 'submit' value = '3'/></li>
					<li><input class = 'btn' type = 'submit' value = '+'/></li>
				</ul>
				<ul class = "row">
					<li><input class = 'btn' type = 'submit' value = '4'/></li>
					<li><input class = 'btn' type = 'submit' value = '5'/></li>
					<li><input class = 'btn' type = 'submit' value = '6'/></li>
					<li><input class = 'btn' type = 'submit' value = '-'/></li>
				</ul>
				<ul class = "row">
					<li><input class = 'btn' type = 'submit' value = '7'/></li>
					<li><input class = 'btn' type = 'submit' value = '8'/></li>
					<li><input class = 'btn' type = 'submit' value = '9'/></li>
					<li><input class = 'btn' type = 'submit' value = '*'/></li>
				</ul>
				<ul class = "row">
					<li><input class = 'btn' type = 'submit' value = '0'/></li>
					<li><input class = 'btn' type = 'submit' value = '.'/></li>
					<li><input class = 'btn' type = 'submit' value = '='/></li>
					<li><input class = 'btn' type = 'submit' value = '/'/></li>
				</ul>
			</div>
		</div>

//Объявление переменных
			var display = $('#display');
			var str = '';
			var btns = document.getElementsByClassName('btn');
			
			//Сброс
			$('#reset').click( function() {
				display.html(''); 
			});
			
			//Пробегаюсь по всем кнопкам
			for (let i = 0; i < btns.length; i++) {
				show_number(btns[i]);
			}
			
			//Вывожу числа на экран
			function show_number(button) {
				$(button).click(function() {
					var value = this.getAttribute('value');
					str += value;
					
					display.text(str);
					
					//При нажатии на равно происходит магия, а потом на дисплей выводится результат
					if (value === '=') {
						var slice_str = str.slice(0, str.length - 1);
						check_operation(slice_str);
						display.text(add);
					}
					
				});
			}

			//Определяем с какой операцией будет работы
			function check_operation(line) {
				var split = line.split('');
				for (let i = 0; i < split.length; i++) {
					switch (split[i]) {
						case '+' :
							var plus = line.split('+');
							add(plus);
							break;
						case '-' :
							var minus = line.split('-');
							deduct(minus);
							break;
						case '*' :
							var star = line.split('*');
							mult(star);
							break;
						case '/' :
							var fraction = line.split('/');
							divide(fraction);
							break;
					}
				}
			}
			
			function add(expr) {
				var sum = parseFloat(expr[0]) + parseFloat(expr[1]);
				//alert(sum); //Для отдалки
				
				//Неужели правда NaN?
				/*if (!isNaN(sum)) {
					return sum;
				} else {
					alert(sum);
				}*/
				return sum;
			}
			
			function deduct(expr) {
				var ded = parseFloat(expr[0]) - parseFloat(expr[1]);
				alert(ded);
			}
			function mult(expr) {
				var mul = parseFloat(expr[0]) * parseFloat(expr[1]);
				alert(mul);
			}
			
			function divide(expr) {
				var div = parseFloat(expr[0]) / parseFloat(expr[1]);
				alert(div);
			}

Цитата:

Сообщение от plug-ugly

Помогите, кто чем может неопытному(

Для начала ты должен научиться помогать себе сам. Сделай полный запускаемый пример и выложи его тут не кусками, а целиком.
Так его можно скопировать и запустить у себя. Не факт, что твои два огрызка заработают если их поместить вместе в один файл...

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>

	<head>
		<meta charset=utf-8"/>
		<title>Calculator</title>
		<link href = "css/style.css" type = "text/css" rel = "stylesheet"/>
		<script src = "https://code.jquery.com/jquery-2.1.0.js"></script> <!--Подключили библиотеку jQuery-->
	</head>

	<body>
		<div id = "case">
			<div id = "screen"><p id = "display"></p></div>
			<div id = "buttons">
				<ul class = "row-first">
					<li><input id = 'reset' type = 'submit' value = 'R'/></li>
				</ul>
				<ul class = "row">
					<li><input class = 'btn' type = 'submit' value = '1'/></li>
					<li><input class = 'btn' type = 'submit' value = '2'/></li>
					<li><input class = 'btn' type = 'submit' value = '3'/></li>
					<li><input class = 'btn' type = 'submit' value = '+'/></li>
				</ul>
				<ul class = "row">
					<li><input class = 'btn' type = 'submit' value = '4'/></li>
					<li><input class = 'btn' type = 'submit' value = '5'/></li>
					<li><input class = 'btn' type = 'submit' value = '6'/></li>
					<li><input class = 'btn' type = 'submit' value = '-'/></li>
				</ul>
				<ul class = "row">
					<li><input class = 'btn' type = 'submit' value = '7'/></li>
					<li><input class = 'btn' type = 'submit' value = '8'/></li>
					<li><input class = 'btn' type = 'submit' value = '9'/></li>
					<li><input class = 'btn' type = 'submit' value = '*'/></li>
				</ul>
				<ul class = "row">
					<li><input class = 'btn' type = 'submit' value = '0'/></li>
					<li><input class = 'btn' type = 'submit' value = '.'/></li>
					<li><input class = 'btn' type = 'submit' value = '='/></li>
					<li><input class = 'btn' type = 'submit' value = '/'/></li>
				</ul>
			</div>
		</div>
	</body>
<script>
			//Объявление переменных
			var display = $('#display');
			var str = '';
			var btns = document.getElementsByClassName('btn');
			
			//Сброс
			$('#reset').click( function() {
				str = '';
				display.text(str); 
			});
			
			//Пробегаюсь по всем кнопкам
			for (let i = 0; i < btns.length; i++) {
				show_number(btns[i]);
			}
			
			//Вывожу числа на экран
			function show_number(button) {
				$(button).click(function() {
					var value = this.getAttribute('value');
					str += value;
					
					//Чтобы число не превышало разрядность
					if (str.length > 8) {
						return 1;
					}
					
					display.text(str);
					
					//При нажатии на равно происходит магия, а потом на дисплей выводится результат
					if (value === '=') {
						var slice_str = str.slice(0, str.length - 1);
						check_operation(slice_str);
						display.text(add);
					}
					
				});
			}

			//Определяем с какой операцией будет работa
			function check_operation(line) {
				var split = line.split('');
				for (let i = 0; i < split.length; i++) {
					switch (split[i]) {
						case '+' :
							var plus = line.split('+');
							add(plus);
							break;
						case '-' :
							var minus = line.split('-');
							deduct(minus);
							break;
						case '*' :
							var star = line.split('*');
							mult(star);
							break;
						case '/' :
							var fraction = line.split('/');
							divide(fraction);
							break;
					}
				}
			}
			
			function add(expr) {
				var sum = parseFloat(expr[0]) + parseFloat(expr[1]);
				alert(sum); //Для отдалки
				
				//Неужели правда NaN?
				/*if (!isNaN(sum)) {
					return sum;
				} else {
					alert(sum);
				}*/
				//return sum;
			}
			
			function deduct(expr) {
				var ded = parseFloat(expr[0]) - parseFloat(expr[1]);
				alert(ded);
			}
			function mult(expr) {
				var mul = parseFloat(expr[0]) * parseFloat(expr[1]);
				alert(mul);
			}
			
			function divide(expr) {
				var div = parseFloat(expr[0]) / parseFloat(expr[1]);
				alert(div);
			}
			
			
		</script>
		
</html>

__________
Вот css "style":
__________
@import url(reset.css);

#case {
width: 350px;
height: 465px;
background: #D3D3D3;
border: 1px solid #778899;
margin: 20px auto;
border-radius: 20px;
}

#screen {
width: 300px;
height: 100px;
background: #A9A9A9;
margin: 25px 25px 0 25px;
border: 1px solid #778899;
border-radius: 5px;
}

#buttons {
width: 300px;
height: 290px;
margin: 25px;
overflow: hidden;
background: #C0C0C0;
border-radius: 10px;
}

.row, .row-first {
overflow: hidden;
}

.row li, .row-first li{
float: left;
margin-top: 15px;
margin-left: 11px;
}

.row li input[type = 'submit'], .row-first input[type = 'submit']{
width: 60px;
height: 40px;
font-size: 16px;
font-weight: bold;
font-family: Arial, Verdana, sans-serif;
border-radius: 10px;
background: #F5F5DC;
}

.row-first #reset {
background: #FF6347;
border-radius: 30px;
}

#display {
font-family: Arial, Verdana, sans-serif;
font-size: 60px;
float: right;
margin: 18px 18px 0 0;
display: block;
}

____________
Вот css "reset"
____________

/* http://meyerweb.com/eric/tools/css/reset/
v2.0 | 20110126
License: none (public domain)
*/

html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, embed,
figure, figcaption, footer, header, hgroup,
menu, nav, output, ruby, section, summary,
time, mark, audio, video {
margin: 0;
padding: 0;
border: 0;
font-size: 100%;
font: inherit;
vertical-align: baseline;
}
/* HTML5 display-role reset for older browsers */
article, aside, details, figcaption, figure,
footer, header, hgroup, menu, nav, section {
display: block;
}
body {
line-height: 1;
}
ol, ul {
list-style: none;
}
blockquote, q {
quotes: none;
}
blockquote:before, blockquote:after,
q:before, q:after {
content: '';
content: none;
}
table {
border-collapse: collapse;
border-spacing: 0;
}

Обратите внимание на то, что Вы передаете на вывод:

display.text(add);

Во-первых, для всех операций Вы передаете add для отображения. Это Ваша функция сложения, а не результат. Думаю, Вы сами не понимаете, что в дальнейшем с ней делает jQuery. Посмотрите синтаксис ради интереса (третий вариант).
https://www.w3schools.com/jquery/html_text.asp
В итоге, происходит ее вызов с аргументом expr = 0 и так как это явно не массив, результат предсказуем: parseFloat(undefined) = NaN с дальнейшем выводом в alert.

Во-вторых, вам нечего передавать в display.text(), так как результат операций Вы нигде не храните и не возвращаете. Здесь не хватает опыта в проектировании. Отделите логику от представления. Пусть функции операций только возвращают результат (без отображения), который уже можно вывести в дальнейшем в alert и в display.text() в одном месте.

Спасибо!
Постараюсь во всем разобраться!