html
    -------------
    <div>
        <center>
            <input type="text"class="f-text">
            <b>+</b>
            <input type="text"class="f-text">
            <b>=</b>
            <span><b>?</b></span>
            <input type="button"value="sum">
        </center>
        <input type="text"class="display">
    </div>

    css
    -------------
    div{text-align: center}
    .f-text{width: 50px;border: 1px solid; background:bisque}
    .display{width:200px;height: 100px;position: relative; border: 2px dashed rgb(74, 8, 228);top: 10px;text-align: center}

    js
    -------------
    var aInput = document.getElementsByTagName('input');
    var aSpan = document.getElementsByTagName('span')[0];
    var i =0;
    
    for (i=0; i < aInput.length; i++) 
    { 
        aInput[i].onkeyup=function() 
        { 
            this.value=this.value.replace(/[^\d]/,'');
        }
        
        aInput[2].onclick=function() 
        { 
            aInput[3].value='' ; 
            (aInput[0].value==='' || aInput[1].value==='')?(aInput[3].value="Please input number!" ):aSpan.innerHTML=parseInt(aInput[0].value)+parseInt(aInput[1].value); 
        }
    }