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

Решение через switch - в принципе, самое простое (исключая вариант eval()) и распространенное.

"Лапшу" if..else if лучше не использовать: есть негласное правило, ограничивающее использование такой конструкции тремя вариантами - а у нас их четыре. Да, читаемость не сильно пострадает от еще одного else if, но абсолютно незачем "ползать по краю", когда можно написать код чисто.

Пример с использованием современных возможностей JavaScript:

document.addEventListener('DOMContentLoaded', () => { const [inpA, ops, inpB, btnCalc, inpRes] = Array.from(document.querySelectorAll('.calc > *')); for (let op of ops.children) op.addEventListener('click', selectOp); btnCalc.addEventListener('click', calc); function selectOp() { for (let op of this.parentElement.children) op.classList.remove('active'); this.classList.add('active'); } function calc() { let [a, b, result] = [+inpA.value, +inpB.value, 0]; if (!isFinite(a) || !isFinite(b)) return inpRes.value = 'Неверный ввод'; inpA.value = a; inpB.value = b; const selectedOp = document.querySelector('.calc [data-op].active'); switch (selectedOp.dataset.op) { case '+': result = a + b; break; case '-': result = a - b; break; case '∗': result = a * b; break; case '÷': result = a / b; } inpRes.value = result; } }); .calc { display: flex; flex-flow: column nowrap; align-items: stretch; max-width: 300px; font: 18px monospace; } .calc * { font: inherit; outline: none; } .calc > * + * { margin-top: 0.5rem; } .calc div { display: flex; flex-flow: row nowrap; justify-content: space-between; padding: 0 1px; } .calc [data-op] { width: calc(25% - 8px); } .calc [data-op]::before, .calc button { content: attr(data-op); display: inline-block; width: 100%; font-size: 1.4rem; line-height: 1.4rem; text-align: center; border: none; border-radius: 3px; transition: box-shadow 0.15s linear; box-shadow: 0 0 0 1px #ccc; background: #eee; cursor: pointer; } .calc [data-op]:hover::before, .calc button:hover { box-shadow: 0 0 0 1px #7af; } .calc [data-op].active::before { background: #aea; } .calc [readonly] { border: none; text-align: center; } <div> <input type="number"> <div> <span data-op="+"></span> <span data-op="-"></span> <span data-op="∗"></span> <span data-op="÷"></span> </div> <input type="number"> <button>=</button> <input readonly> </div>