Javascript 增加按钮点击次数

我正试图用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>';

---

我不允许使用jQuery，所以请只使用香草JavaScript。

将

标记中的onclick属性设置为调用函数，例如increaseScore:

 onclick="increaseScore()"

并为跨度元素指定一个id：

 <span id="myScore">

---

将

标记中的onclick属性设置为调用函数，如increaseScore:

 onclick="increaseScore()"

并为跨度元素指定一个id：

 <span id="myScore">

---

我会做这样的事情：

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();

var数据={
球队1分：42分，
球队2分：6分，
第1队：{姓名：'Beast Amsterdam'}，
2队：{姓名：'Amsterdam Money Gang'}
};
var分数_应用={
工具：{
设置核心：功能（i、pm）{
var currScore=parseInt（数据['team_'+i+'u score']，10）；
if（currScore=='0'&&pm=='dn'）返回；//防止-1分
var newScore=数据['team_uu'+i+'u score']+=（pm=='up'？1:-1）；
document.getElementById（'team_'+i+'u score'）。innerHTML=newScore；
}
},
游戏：{
游戏页面：功能（数据）{
var html=''；
对于（var i=1；i我会这样做：


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();

var数据={
球队1分：42分，
球队2分：6分，
第1队：{姓名：'Beast Amsterdam'}，
2队：{姓名：'Amsterdam Money Gang'}
};
var分数_应用={
工具：{
设置核心：功能（i、pm）{
var currScore=parseInt（数据['team_'+i+'u score']，10）；
if（currScore=='0'&&pm=='dn'）返回；//防止-1分
var newScore=数据['team_uu'+i+'u score']+=（pm=='up'？1:-1）；
document.getElementById（'team_'+i+'u score'）。innerHTML=newScore；
}
},
游戏：{
游戏页面：功能（数据）{
var html=''；
对于（var i=1；i“x$（'#content'）.html（html）；”？为什么会有一个“x”？显然，这就是取代jquery的原因。我正在使用xui.js进行dom操作，这就是为什么您在使用哪个部分时会遇到问题；触发
adjustScore
函数（或您正在调用的任何函数），或适当地更新html？如果在加号的一次单击中使用
data.team_1_score++
“x$（'#content'）.html（html）；”？为什么会有“x”？很明显，这就是取代jquery的原因。我正在使用xui.js进行dom操作，这就是为什么您遇到问题的原因；触发您的
adjustScore
函数（或您调用的任何函数），或适当地更新html？如果使用
数据会发生什么情况。单击加号时team_1_score++
，我会遇到一个问题，即我正在使用名称空间和方法。如果添加函数，我将返回错误
未捕获引用错误：未定义increaseScore
。这是返回b的一个示例你可以看到一个例子
html\u back\u button=''；html=html+html\u back\u button；
，然后我遇到了一个问题，我正在使用一个名称空间和方法。如果我添加这个函数，我将返回错误
未捕获引用错误：increaseScore未定义
。这是一个back按钮的例子。所以你可以看到一个示例
html\u back\u button=''；html=html+html\u back\u button；
完美的解释！现在唯一的问题是数据是来自json文件的数据。这些数据将从另一个方法获取。因此getscore方法无法访问我的数据。完美的解释！现在唯一的问题是数据是来自json文件。此数据将从另一个方法获取。因此getscore方法无法访问我的数据。