Question

所以我上方有一个侧箱作为账单。

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

你应该使用＆amp; nbsp in after rupee sign span tag，如下所示..

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

或在span标记中包装price变量并给它们留下边距'

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

单击按钮时重叠

1 个答案: