Question

I want to be able to show the onclick count for button#1, button#2, and show the sum of clicks for button#1+button#2. So far all I have been able to show is the sum.

HTML

 <button id="1" onclick = "countCar('ferrari');">Button#1</button>
 <a>Ferraris</a><span id="ferrariCount"></span>

 <a id="showSum">SUM<span id="carCount"></span></a>

 <button id="2" onclick = "countCar('toyota');">Button#2</button>
 <a>Toyotas</a><span id="toyotaCount"></span>

Javascript

  var carCount = 0; 
  var ferrariCount = 0;
  var toyotaCount = 0;
  function countCar(type)

  {
    carCount = carCount + 1;
    document.getElementById('carCount').innerHTML = carCount;

    ferrariCount = ferrariCount + 1;
    toyotaCount = toyotaCount + 1;

     if(type =='ferrari'){document.getElementById('ferrariCount').innerHTML = ferrariCount;
             }else{
             document.getElementById('toyotaCount').innerHTML = toyotaCount;}
  };

Answer 1

Your code is a bit redundant so I’d structure it like this:

var counts = {
  'ferrari': 0,
  'toyota': 0,
  'total': 0
};

function countCar(type) {
  document.getElementById('carCount').innerHTML = ++counts['total'];
  document.getElementById(type + 'Count').innerHTML = ++counts[type];
}

Instead of using a ton of global variables, just create and object to store your numbers in there. It makes your code cleaner and easier to read.