javascript - 单击按钮时重叠

Question

The sidebox

所以我在上面有一个边箱，它充当了账单。

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%;
}

因此，当单击下面的其中一个按钮时，上面的边栏会动态显示账单金额。

the buttons

按钮代码:

<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
     }
 }

然而这发生了: The error

我该如何解决这个问题？ boundry of the box(height width)

Answer 1

您应该在卢比符号后的 span 标签中使用  ，如下所示。

screen.innerHTML = '<span id="rupee" style="font-family: 
          DejaVu Sans;">&#x20b9;</span> &nbsp; &nbsp; ' +price;

或者将 price 变量包装在 span 标签中并给它们留边距'

screen.innerHTML = '<span id="rupee" style="font-family: 
          DejaVu Sans;">&#x20b9;</span> <span style="margin-left:10px;">' +price+'</span>';