如何將計數器輸出顯示為文本而不是輸入

Question

我創建了一個基本的JavaScript計數器，該計數器計算按鈕被按下的次數，然后將其顯示在輸入框中。

我要更改它，以便它計算按下的次數並將其顯示為純文本。

例如5,123

HTML：

     <div class="col-md-2 col-md-offset-3">
   <div class="outer"><img src="assets/img/f1.jpg" alt="..." class="img-rounded" style="width:250px;height:150px"></div>
   <div class="inner">
     <center><button class="btn btn-default" value = "Click" onclick = "count()">Vote</button></center>
     <input id = "counting" type = "text" class="votecount" />

   </div> 
 </div>

CSS：

  .outer {
     position:absolute;
    }

  .inner {
     position:relative;
     margin-top:50px;
   }

  .votecount {
     width:50px;
   }

JAVASCRIPT：

 <script type ="text/javascript">

  var x = 0;
 function count()
 {
 x += 1;
  document.getElementById( "counting" ).value = x;
  }
   </script>

Answer 1

使用類似的方法..首先獲得計數的值..如果沒有表決..在其中添加1 ..如果已經有表決..將其遞增

 function count()
 {
  var x = document.getElementById("counting").value;
     if(x==""){
         document.getElementById( "counting" ).value = 1;
     }else{
         document.getElementById( "counting" ).value = parseInt(x)+1;
     }   

  }

這是小提琴的鏈接http://jsfiddle.net/szWth/

Answer 2

更改：

<input id = "counting" type = "text" class="votecount" />

至：

<span id = "counting" class="votecount"></span>

Answer 3

使輸入成為跨度，並更改DOM查詢以更改“ innerHTML”： function count() { x += 1; document.getElementById( "counting" ).innerHTML = x; } function count() { x += 1; document.getElementById( "counting" ).innerHTML = x; }