<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<div id="keys">
<button>1</button>
<button>2</button>
<button>3</button>
<button>4</button>
<button>C</button>
<button>+</button>
<button>-</button>
<button>=</button>
</div>
<textarea name="" readonly id="sc" cols="30" rows="10"></textarea>
<script>
//利用冒泡，事件绑定在外层，通过e.target获取目标元素
var okeys= document.querySelector('#keys');
var osc =document.querySelector('#sc');
okeys.onclick=function(e){
var src=e.target;
if(src.nodeName=='BUTTON'){
var currentHTML = src.innerHTML;
if(currentHTML=='C'){
osc.innerHTML='';
}else if(currentHTML=='='){
try{
osc.innerHTML= eval(osc.innerHTML)
}catch(err){
osc.innerHTML= String(err);
}
}else {
osc.innerHTML= osc.innerHTML.concat(e.target.innerHTML);
}
}
}
</script>
</body>
</html>