Increase number on button click

Question

I'm trying to make an application with JSON data for a frisbee tournament. I'm now working on a page where you can view and edit the scores from a match. It should be possible to increase or decrease the score of either of the two teams. It looks like this:

I skipped some parts from the code to make it easier to read. This is the relevant code:

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>';

The score between the span must be increased or decreased onclick

    html = html + html_team_1;

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

I'm not allowed to do it with jQuery, so vanilla JavaScript only please.

Answer 1

I would do somethig like this:

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

Add an ID to the span holding the score, and onclick send to the method setScore two arguments:

• the team number (i = 1||2)
• and the type of math we need to apply to the current score _{(I used a string representation "up" and "dn" ).}

This two arguments are all you need to immediately keep up to date the data Object (holding the game stats) and apply the changes on screen to the targeted SPAN ID .

Answer 2

Set the onclick attribute within the <a href="#" onclick="" ></a> tag to calling a function such as increaseScore:

 onclick="increaseScore()"

And give the span element an id:

 <span id="myScore">

Then write a function which adds the score:

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