Калькулятор выдает 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); } |
Цитата:
Так его можно скопировать и запустить у себя. Не факт, что твои два огрызка заработают если их поместить вместе в один файл... |
<!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() в одном месте. |
Спасибо!
Постараюсь во всем разобраться! |
Часовой пояс GMT +3, время: 02:08. |