<div id="box">

<input type="text" class="formerInput" value="1" />

<select class="menu">

<option value="+">+</option>

<option value="-">-</option>

<option value="*">*</option>

<option value="/">/</option>

</select>

<input type="text" class="laterInput" value="2" />

<span class="sp1">=</span>

<span class="sp2">2</span>

</div>

<script>

var box = document.querySelector('#box');

var boxInput = {

forInu: box.querySelector('.formerInput'),

menu: box.querySelector('.menu'),

optio: box.querySelectorAll('option'),

laterInu: box.querySelector('.laterInput'),

sp2: box.querySelector('.sp2'),

sp1: box.querySelector('.sp1')

};

for(var i = 0; i < boxInput.optio.length; i++) {

boxInput.menu.onclick = function() {

switch(this.value) {

case '+':

boxInput.sp1.onclick = function() {

ret(ff.add(boxInput.forInu.value, boxInput.laterInu.value));

};

break;

case '-':

boxInput.sp1.onclick = function() {

ret(ff.sub(boxInput.forInu.value, boxInput.laterInu.value));

};

break;

case '*':

boxInput.sp1.onclick = function() {

ret(ff.mul(boxInput.forInu.value, boxInput.laterInu.value));

};

break;

case '/':

boxInput.sp1.onclick = function() {

ret(ff.dir(boxInput.forInu.value, boxInput.laterInu.value));

};

break;

}

}

}

function ret(ret) {return boxInput.sp2.innerText = ret;}

var ff = {

add: function(a, b) {return +a + +b;},

sub: function(a, b) {return a - b;},

mul: function(a, b) {return a * b;},

dir: function(a, b) {return a / b;}

}

</script>