Примитивный калькулятор (ошибка в коде)

Вопрос-ответ JavaScript
1

Даже не калькулятор, а умножалка на 2 числа
2 числа из input-ов перемножаются, и результат при клике по кнопке “=” должен выводится в желтый блок div с классом result
Код тут: http://jsfiddle.net/LenaR/e19ko8rz/10/
В итоге - результата в этом блоке нет
Ошибок в консоли браузера тоже нет
На jshint.com сообщается, что одна неопределенная переменная mult. Не могу понять этой ошибки, почему: ведь mult - это результат от умножения параметров, в которые передаются аргументы. Или неправильно этим аргументам присваиваются value от input-ов?
*Предполагаю, что две функции, и они отдельно себе работающие, и не видят переменных друг друга. Тогда что можно сделать чтобы связать работу этих двух функций?
Тогда можно так: убрать эту вторую функцию, и сделать переменную var resmult, где значением присвоить анонимную функцию. Пример - http://jsfiddle.net/LenaR/8pt6d52v/2/
Но так тоже не работает (и в консоли браузера не выдает ошибок, и на jshint.com обнаруживает одну неопределенную переменную mult)

2

Тут много неточностей в коде. У дива нет свойства “value”. Это свойство есть у инпутов. Чтобы отобразить что-то в диве нужно использовать .innerHTML или innerText. htmlbook.ru в помощь.
Ещё одна проблема - навешивание обработчика событий. Его нужно навесить один раз и передать в него функцию, которая будет вызываться на каждое срабатывания события. В данном случае, клик. Я написал рабочий пример. Если неясно объяснил, приветствуются уточняющие вопросы )
http://jsfiddle.net/kontrach/gp893khv/1/

3

http://jsfiddle.net/kontrach/gxx7yew1/
Ты не вызвала функцию в первом варианте. Определила, но не вызывала. А значит, обработчик событий не навесился.
http://jsfiddle.net/kontrach/gxx7yew1/1/ и в этом примере ты ожидаешь других аргументов в функции. Функцию не нужно вызывать самостоятельно. Если навешивается обработчик событий, то он сам вызывается в нужное время.

4

По этому примеру - http://jsfiddle.net/kontrach/gxx7yew1/1/
следующий вариант кода - http://jsfiddle.net/LenaR/1x2La4o1/2/
В общем, я не знаю как объединить эти две функции между собой.
Или все эти переменные:
var res = document.querySelector(’.btn’);
res.addEventListener(’.click’, resmult, false);
var resblock = document.querySelector(’.result’);
вообще не надо заключать в функцию, и не создавать вторую функцию resmult?
То есть - для этой задачи должна быть только одна функция - умножение параметров (собственно function calculate), а все действия (навешивания обработчиков, присваивания значений) могут быть и без функций?

5

Я обновил твой код и добавил комментарии.
jsfiddle.net/kontrach/z9hunctf/1/
Я не понимаю, зачем ты хочешь объединить две эти функции, если они не связаны вообще.
Может, у тебя другая задача?

6

Пройдись по-строчно по своей программе и проговори, что она делает.
Создай примитивный алгоритм. Напиши его просто словами. Что должна выполнять программа, чего ты от неё ожидаешь и какой результат получаешь.
Пошагово пройдись по этим пунктам и тебе станет яснее, что проблема не в объеденении функций, а в самой реализации желаемого.

1 лайк
7

Примитивный алгоритм дословно:

  1. создаем формальное умножение параметров (внутри функции calculate)
  2. создаем первый аргумент, который будет находить элемент DOM, его значение инпута для получения числа из поля ввода
    создаем второй такой аргумент для второго поля ввода
  3. создаем действие клика по кнопке “=”
  4. создание переменной для записывания результата от умножения в блок с классом result
    5)объявление функций.
    Теперь этот алгоритм написать кодом:
  5. function calculate (a, b) {
    mult = a*b // здесь матем операция
    return mult; // здесь должно быть возвращение результата
    }
    За скобками этой функции, в которой находятся формальные параметры, будут находится аргументы, которым присваиваются конкретные значения (то есть навешиваются обработчики для получения этих данных из DOM):
  6. arg1 = document.querySelector(’.firstN’).value; // получить значение, которое введет пользователь в инпут с классом firstN (И здесь вопрос - можно ли таким образом получить это значение?)
    arg2 = аналогично…
  7. //Действие клика по кнопке “=” (чтобы описать этот клик кодом - опять же понадобится функция для запуска обработчика)
    function resmult() {
    var res = document.querySelector(’.btn’); // получаем доступ к селектору этой кнопки
    res.addEventListener(’.click’, resmult, false); // навешиваем обработчик на созданную переменную, которая обращается к функции resmult на стадии всплытия
  8. // а также в той же функции создаем переменную resblock, которая находит желтый блок, в котором будет вывод полученного результата от умножения
    var resblock = document.querySelector(’.result’);
    // и присваивание ему результата от умножения
    resblock.innerHTML = mult;// создается элемент html (текст) со значением результата умножения
    }// не знаю, можно ли поместить переменные var res и var resblock в тело одной функции
    5)//теперь эти аргументы надо передать параметрами функции calculate:
    calculate(arg1, arg2);
    //а также объявить вторую ф-ю:
    resmult();

В моем понимании - каждое отдельное какое-то действие (клик по кнопке, матем операция, и т.д.) должно быть функцией. Но потом непонятно как всё это связать вместе. Сами по себе переменные они же не будут работать.

Не знаю, верное ли у меня понимание, что и как должно работать.

Возможно, есть какие-то ресурсы, где можно научиться строить алгоритмы для создания программ, начиная из простых примеров. А то одной теории (типа htmlbook) недостаточно.

8

Ты получаешь это значение только в начале выполнения скрипта. А в начале, если не указать явно значения инпутов, у тебя получается две пустые строки.

Ты передаешь в обработчик событий коллбэк (функцию, которая сработает на определённое событие) с таким же именем resmult. Т.е. у тебя по клику будет срабатывать функция resmult. А она навешивает обработчик событий. А тебе надо, чтобы по клику, брались текущие значения инпутов, перемножались и записывались в resultBlock.

9

Я попробую ещё раз написать пример. Чтобы было понятно.
Извнини, я не такой крутой преподаватель, как Дима Подгорный, но, постараюсь объяснить )

10

Сдела пример. Надеюсь, будет понятно
http://jsfiddle.net/kontrach/eL6febny/4/

11

спасибо за пример
но мне пока сложно понимать то что выходит за рамки моего уровня знания JS, в частности, как может работать функция мат операции без аргументов (для того чтобы получить от работы функции какой-то результат, ей надо вначале передать какие то значения)

Или более простой пример:

<html><head>
<style>
    .result {
        margin-top: 30px;
        height: 50px;
        width: 100px;
        background: yellow;
        color: red;
        font: 24px Verdana; 
    }
</style>
<script>
function calculate (a, b){
mult = a*b;
    return mult;
}

var arg1 = 2;
var arg2 = 3;
var result = document.querySelector('.btn');
result.addEnentListener('click', calculate, false);
 var result = calculate(arg1, arg2);

</script>
</head>

<body>    
    <input type = "button" class = "btn" value = "=">
    <br/>
    <div class="result"></div>
</body></html>
  • чтобы при клике по кнопке btn в желтый блок выводился результат 6
    Не работает . Не понимаю, как правильно навешивать этот обработчик клика по кнопке для вывода результата в другой div.
12

Порядка нет…

Эта часть никогда не сработает (выдаст ошибку)

result.addEnentListener(‘click’, calculate, false);

и ко всему Вы еще перезаписали result

(плохо нет нумерации строк)
в этом выражении
var result = document.querySelector(‘.btn’);
Вы в result записываете ноду+ навешиваете Listener
и после var result = calculate(arg1, arg2);
вы ее перекрываете вызовом calculate

и обратите внимание на то что Вы записали в саму функцию calculate

есть разница в записи:

function calculate (a, b){
mult = a*b;
return mult;
}

||

function calculate (a, b){
var mult = a*b;
return mult;
}

Когда все поправите сверяемся http://jsfiddle.net/eL6febny/9/ и избавляемся от лишних объявлений http://jsfiddle.net/eL6febny/8/
Судя по описанию желаемое !== действительности.
http://jsfiddle.net/eL6febny/10/

проверяйте код в броузере по F12, в консоли и все будет гуд.

1 лайк
13

Функция не обязательно должна иметь параметры. Например, мы можем складывать числа, которые определены ранее, а функция будет использовать эти переменные в своём теле.

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

14

Такой вариант не сработает, так как функция calculate будет вызвана с аргументом event. Т.е. addEventListener вызывает твою функцию и передаёт тебе туда объект с кучей информации о событии, его источнике, на каком DOM узле оно было вызвано. Ты можешь это легко проверить написать следущую строку в консоли

document.addEventListener(‘click’, function(e){ console.log('event from addEventListener: ', e);});
Кстати, если не передавать третий параметр, то он автоматически будет false.

15

Как-то так
http://jsfiddle.net/e19ko8rz/11/

1 лайк
16

Пробую усложнить задачу калькулятора - добавить туда возможность выбора действия мат операции: “+”, “-”, “*”.
Вот что вышло - http://jsfiddle.net/LenaR/9h0jx2fy/1/
В итоге - калькулятор склеивает строки вместо вычислений. Почему не работает ParseInt? И почему не выполняются условия с присваиванием функций fplus, fminus, fmult в зависимости от выбора радиобаттона?
В консоли ошибок не выдает. На Jshint.com говорит, что есть неиспользуемые переменные - pl, min, mult. Но почему они неиспользуемые, если их функции применяются в условиях?

17

lena, может как нибудь к привычному виду перейдем http://jsfiddle.net/La2nmzo6/2/ ?

18
  1. Radio-button: нужно чтобы атрибут name был один, а изменять нужно только id, это должно выглядеть так:
    <input type = "radio" id = "plus" name = "rad"><label> +</label>
    <input type = "radio" id = "minus" name = "rad"> <label>-</label>
    <input type = "radio" id = "mult" name = "rad"> <label>*</label>

  1. Изменил функции: зачем ты создаешь переменную? Сразу кидай в return, потому что у тебя других действий нет. Только передача в return.

  2. Не работала функция сложения т.к. ты соединяла две строки, и только после этого парсила в тип Integer

  3. Для того чтобы получить значение того radio-button который сейчас выбран создаем обертку к которой привязываем обработчик по клику.
    Далее при каждом клике проверяем какой элемент у нас в target. Если нужный нам radio-button, то все ок и берем у него поле id.
    Далее полученное значение помещаем в переменную userchoise

  4. В проверке была ошибка:

document.querySelector('#rad').name = "plus"
document.querySelector('#rad').name = "minus"

Тут ты присваиваешь полученной выборке document.querySelector('#rad').name значение plus
В итоге ты всегда получаешь true
Что значит, что у тебя всегда будет срабатывать первый if

Вот результат
http://jsfiddle.net/9h0jx2fy/3/

Как-то так, тебе нужно понять основы, чтобы идти дальше.

Разберись с присвоением и операторами равенства.
Так же разберись с элементами формы: радио-кнопка, чек-бокс, инпуты, кнопки, выпадающие списки

1 лайк
19

не срабатывают label:

1) <input id="rad"><label for="rad">Текст</label>

2) <label>
     <input type="radio"> Текст
   </label>

еще может пересмотреть логику, под каждую операцию писать функцию?!
Может вносить знак между двух чисел в момент нажатия на “=”…

20

Я за label как-то и забыл

Я считаю, что это не самое главное, что необходимо понять в данный момент.

Это все дополнительные свистелки-пыхтелки, которых можно наделать миллион.

Главное понимать основы данного калькулятора