Не выводит результат операции

Question

Есть код

function f10() {
  let i101 = document.querySelector(".i-101");
  let i102 = document.querySelector(".i-102");
  let s103 = document.querySelector(".s-103");
  let out10 = document.querySelector(".out-10");

  switch (s103.value) {
    case "+":
      out10.innerHTML = +i101.value + +i102.value;
      break;
    case "-":
      out10.innerHTML = +i101.value - +i102.value;
      break;
    case "*":
      out10.innerHTML = +i101.value * +i102.value;
      break;
    case "/":
      out10.innerHTML = +i101.value / +i102.value;
      break;
  }
}
document.querySelector(".b-10").onclick = f10;

<p><b>Task 10.</b></p>
<p>Дан input i-101 и input-102, type=number. Дан select s-103, который содержит две операции - +, -, *, / . Дана кнопка b-10, при нажатии на которую срабатывает функция f10. Функция выводит в out-10 результат операций выбранной в 3-м select к числам введенным в первом и втором input. Например выбрано 1 13 +, нужно вывести результат операции 1+13 т.е. 14.
</p>
<div class="form-control">Input i-101 <input type="number" class="i-101"></div>
<div class="form-control">Input i-102 <input type="number" class="i-102"></div>
<div class="form-control">
  <select class="s-103">
    <option value="+">+</option>
    <option value="-">-</option>
    <option value="*">*</option>
    <option value="/">/</option>
  </select>
</div>
<button class="button-primary b-10">Task-10</button>
<div class="out-10"></div>

Как сделать, что бы сократить до 1 строки ? Пробую записать как :

out10.innerHTML = +i101.value + s103.value + +i102.value;

Но в этом случае выводит просто значение, а не результат операции.

Answer 1

Можно так:

function f10() {
  let i101 = document.querySelector(".i-101");
  let i102 = document.querySelector(".i-102");
  let s103 = document.querySelector(".s-103");
  let out10 = document.querySelector(".out-10");
  let operations = {
    '+': (a, b) => +a + +b,
    '-': (a, b) => +a - +b,
    '*': (a, b) => +a * +b,
    '/': (a, b) => +a / +b
  }
  out10.textContent = operations[s103.value](i101.value, i102.value)
};
document.querySelector(".b-10").onclick = f10;

<p><b>Task 10.</b></p>
<p>Дан input i-101 и input-102, type=number. Дан select s-103, который содержит две операции - +, -, *, / . Дана кнопка b-10, при нажатии на которую срабатывает функция f10. Функция выводит в out-10 результат операций выбранной в 3-м select к числам введенным
  в первом и втором input. Например выбрано 1 13 +, нужно вывести результат операции 1+13 т.е. 14.
</p>
<div class="form-control">Input i-101 <input type="number" class="i-101"></div>
<div class="form-control">Input i-102 <input type="number" class="i-102"></div>
<div class="form-control">
  <select class="s-103">
    <option value="+">+</option>
    <option value="-">-</option>
    <option value="*">*</option>
    <option value="/">/</option>
  </select>
</div>
<button class="button-primary b-10">Task-10</button>
<div class="out-10"></div>

Answer 2

Можно и так

let i101 = document.querySelector('.i-101');
let i102 = document.querySelector('.i-102');
let s103 = document.querySelector('.s-103');


function f10() {
    let a = +i101.value;
    let b = +i102.value;
    let c = s103.value;
    if (c == "/") {
        document.querySelector('.out-10').innerHTML = a / b;
    }
    else if (c == "+") {
        document.querySelector('.out-10').innerHTML = a + b;
    }
    else if (c == "-") {
        document.querySelector('.out-10').innerHTML = a - b;
    }
    else if (c == "*") {
        document.querySelector('.out-10').innerHTML = a * b;
    }
}

document.querySelector('.b-10').onclick = f10;

<section>
        
      
        <div class="form-control">Input i-101 <input type="number" class="i-101"></div>
        <div class="form-control">Input i-102 <input type="number" class="i-102"></div>
        <div class="form-control">
            <select class="s-103">
                <option value="+">+</option>
                <option value="-">-</option>
                <option value="*">*</option>
                <option value="/">/</option>
            </select>
        </div>
        <button class="button-primary b-10">Ответ</button>
        <div class="out-10"></div>
    </section>

БЛОГ НА HUSL

Не выводит результат операции

Ответы (2 шт):