按鈕點擊次數增加

Question

我正在嘗試使用JSON數據爲飛盤比賽做一個應用程序。我現在正在製作一個頁面，您可以查看和編輯比賽中的比分。應該可以增加或減少兩隊之一的得分。它看起來像這樣：

我跳過從代碼中的一些部分，使其更易於閱讀。這是相關代碼：

gamePage: function(data){ 

    var score1 = parseInt(data.team_1_score), 
     score2 = parseInt(data.team_2_score); 

    var html = '', 

    html_pool_open = '<section class="new_page">'; 
    html = html + html_pool_open; 

    var html_pool_top = '<div class="game">'; 
    html = html + html_pool_top; 

    var html_team_1 = '<div class="name">'+data.team_1.name+'</div>' 
      + '<div class="score score_team1">' 
       + '<a href="#" onclick="" ><img src="/images/plus.png"/></a>' 
       + '<span>'+score1+'</span>' 
       + '<a href="#" onclick="SCORE_APP.tools.minusOne()"><img src="/images/minus.png"/></a>' 
      + '</div></div>'; 

跨度之間的分數必須增加或減少onclick

html = html + html_team_1; 

    x$('#content').html(html); 
} 

我不能用jQuery做到這一點，所以香草的JavaScript只請。

Answer 1

設置<a href="#" onclick="" ></a>標記中的onclick屬性來調用一個函數，如increaseScore：

onclick="increaseScore()" 

，並給予跨度元素的ID：

<span id="myScore"> 

然後寫一個函數，它把成績：

function increaseScore() 
{ 
score1++; 
document.getElementById("myScore").innerHTML=score1; 
} 

Answer 2

我會做這樣的事情：

LIVE DEMO

var data = { 
    team_1_score: 42, 
    team_2_score: 6, 
    team_1 : {name:'Beast Amsterdam'}, 
    team_2 : {name:'Amsterdam Money Gang'} 
}; 

var SCORE_APP = { 

    tools : { 
    setScore : function(i, pm){ 
     var currScore= parseInt(data['team_'+ i +'_score'] , 10); 
     if(currScore=='0' && pm=='dn') return; // prevent -1 score 
     var newScore = data['team_'+ i +'_score'] += (pm=='up'? 1 : -1); 
     document.getElementById('team_'+ i +'_score').innerHTML = newScore;  
    } 
    }, 

    game : { 
    gamePage : function(data) { 
     var html = '<section class="new_page">';  
     for(var i=1; i<3; i++){ 
      html += '<div class="game"><div class="name">'+ data['team_'+i].name +'</div>'+ 
      '<div class="score score_team1">'+ 
      '<a href="javascript:;" onclick="SCORE_APP.tools.setScore(\''+i+'\',\'up\')">'+ 
      '<img src="http://i.imgur.com/axk6J7M.jpg"/></a>'+ 
      '<span id="team_'+i+'_score">'+ data['team_'+i+'_score'] +'</span>'+ 
      '<a href="javascript:;" onclick="SCORE_APP.tools.setScore(\''+i+'\',\'dn\')">'+ 
      '<img src="http://i.imgur.com/movjGkd.jpg"/></a>'+ 
      '</div></div>'; 
     }  
     html += '</section>'; 
     document.getElementById('content').innerHTML = html; 
    }  
    }, 

    init : function(){ 
    this.game.gamePage(data); 
    } 

}; 


SCORE_APP.init(); 

添加的ID到span保持的樂譜，並onclick發送到方法setScore兩個參數：

• 的隊號碼（I = 1 | | 2）
• 和我們需要應用到當前分數的數學類型_{（我用字符串表示"up"和"dn"）。}

這兩個參數都需要立即跟上迄今爲止data對象（持有本遊戲的統計），並在屏幕上更改應用到目標SPAN ID。