单击按钮时重叠

边箱

所以我上面有一个侧盒，它充当账单。

HTML
    </div>
<div id="crt_user">
    <h1>Summary: (Choose items )</h1>
    <p>Amt left in Wallet: 1234<br>
     <span id="left">Bill Amt:</span> 
     <!--the container where the price is shown-->
     <div id="tags">
         <span id="rupee" style="font-family: DejaVu Sans;">&#x20b9;</span>
        <div id="result">0</div>
    </div>  

     <button id="clear">Clear</button>
    </p>     
    </div>

边框有以下css：

  /*#crt_user header and ruppe symbol */
#left {
position:absolute;
top:85%;
left:0%;
font-size:1rem;
}
#rupee {
position:absolute;
top:-10%;
left:0%;
}
#result {
  position:absolute;
  top:2%;
  left:10%;
  /* background-color: red; */
  height:90%;
  width:60%;
}

因此，当单击下面的按钮之一时，上面的边框会动态显示帐单金额。

按钮

按钮代码：

<button class="items" id="34">Pani Puri &emsp;  <span style="font-family: 
DejaVu Sans;">&#x20b9;</span>50</button> <br>

这背后的js是：

 function main() {
   var item=document.getElementsByClassName('items');
   var screen = document.getElementById("tags");
   var result = document.getElementById("result");
   var price=0;
    var prices =



[1,2,3,4,5,6,7,8,9,11,12,13,14,16,17,18,19,20,21,22,23,24,25,26,27,28,29,30,31,32,33,34,35,36,37,38,39,40,41,42];

for(var i=0;i<item.length;i++) {
      item[i].addEventListener("click",function() {
           var e = parseInt(this.getAttribute('id'));
           console.log(prices[e]); 
            document.getElementById(this.getAttribute('id')).disabled =true;
            price += prices[e];
              screen.innerHTML = '<span id="rupee" style="font-family: 
          DejaVu Sans;">&#x20b9;</span>' +price;
     }); //end EventListener functionality
     }
 }

然而这发生了：错误

我该如何解决 ？盒子的边界（高宽）