0

Недавно начал изучать JS, для практики решил написать небольшой калькулятор. Все в нем более-менее работает, но интересует вопрос, как оптимизировать код, т.к. во всех функциях 90% повторябщейся информации.

Создавал отдельную функцию Init() и выносил туда всю инициализацию переменных, вызывая ее в коде остальных функций. Однако, выдавало ошибки, что переменные не определены.

Помогите оптимизировать данный код.

    function sum(){
    let num1 = document.querySelector('#n1').value;
    let num2 = document.querySelector('#n2').value;
    let result;

    num1 = parseInt(num1);
    num2 = parseInt(num2);

    result = num1 + num2;
    document.querySelector('#out').innerHTML += result + ' ';
}

function dif(){
    let num1 = document.querySelector('#n1').value;
    let num2 = document.querySelector('#n2').value;
    let result;

    num1 = parseInt(num1);
    num2 = parseInt(num2);

    result = num1 - num2;
    document.querySelector('#out').innerHTML += result;
}

function dvs() {
    let num1 = document.querySelector('#n1').value;
    let num2 = document.querySelector('#n2').value;
    let result;

    num1 = parseInt(num1);
    num2 = parseInt(num2);

   if (num1 <= 0 || num2 <=0){
       alert('Числа должны быть больше 0');
   }
   else {
       result = num1 / num2;
       document.getElementById('out').innerHTML += result + ' ';
   }
}
4
  • 1
    Добавьте хтмл и цсс плиз, чтобы Ваш код можно было воспроизвести полностью. )
    – Crus
    8 авг 2019 в 18:48
  • Ну как минимум num1, num2 и result вынести из каждой функции и сделать глобальными 8 авг 2019 в 18:54
  • Как вариант, сделайте функцию, которая возьмет значения из формы, выполнит parseInt и вернет массив из двух значений, т.е. буквально return [ num1, num2 ]. В остальных функциях ее вызывать и работать с массивом arr[0] и arr[1]
    – Mike
    8 авг 2019 в 19:30
  • А с каких это пор 0 нельзя делить на что-либо? 8 авг 2019 в 19:51

1 ответ 1

0

Можно сразу вынести поиск элементов по дереву DOM и потом использовать их в остальных частях программы. Поскольку значения будут меняться, то их сразу получать смысла нет и лучше делать это в процессе. В общем можно как-то так сделать.

(_ => {
    let n1 = document.querySelector('#n1');
    let n2 = document.querySelector('#n2');
    let out = document.querySelector('#out');
    
    document.querySelector('#sum').onclick = () => {
        out.innerHTML += `${parseInt(n1.value) + parseInt(n2.value)} `;
    }

    document.querySelector('#dif').onclick = () => {
        out.innerHTML += `${parseInt(n1.value) - parseInt(n2.value)} `;
    }

    document.querySelector('#dvs').onclick = () => {
        let [v1, v2] = [parseInt(n1.value), parseInt(n2.value)];
        if (v1 <= 0 || v2 <=0)
            alert('Числа должны быть больше 0');
        else 
            out.innerHTML += `${v1 / v2} `;;
    }
    
})(); 
  
<div>
  <input id="n1" type="text" />
</div>
<div>
  <input id="n2" type="text" />
</div>
<div>
  <label id="out" />
</div>
<br />
<button id="sum"> + </button>
<button id="dif"> - </button>
<button id="dvs"> / </button>

P.S. Обертку (_ => { /* код */ })(); из кода можно удалить, она нужна только для того, чтобы не захломлять глобальное пространство и переменные n1, n2, out не были видны за пределами этой обертки.

2
  • Спасибо, не подскажите, что в вашем случае означает знак доллара? $ - ранее встречал только в JQuery.
    – Vanya228
    9 авг 2019 в 18:49
  • @KekJS это форматирование строк, которое появилось в ES6. Используя обратные косые кавычки ` и знак $ внутри них, можно вставлять внутрь строки выражения JavaScript. К примеру выражение "привет " + name + " ваш номер +8 " + tel можно написать проще `привет ${name} ваш номер +8 ${tel}`.
    – Alex Krass
    9 авг 2019 в 19:03

Ваш ответ

Нажимая на кнопку «Отправить ответ», вы соглашаетесь с нашими условиями использования и подтверждаете, что прочитали и поняли наши политику конфиденциальности и нормы поведения.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.