ボタンをクリックすると重複します

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

以下のいずれかのボタンがクリックされたときに、動的上記sidebox紙幣量を示しています。ボタンの

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; 

を& NBSPを使用するか、spanタグで価格変数をラップし、それらに作業してください左マージン

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