SVG Get number of polygons using class

HTML

<svg xmlns="http://www.w3.org/2000/svg" version="1.1" width="433" height="378" preserveAspectRatio="none" version="1.1" x="0" y="0">

  <g class="shapes">

    <polygon points="35.582,121.756 0.578,61.128 35.582,0.5 105.588,0.5 
	140.592,61.128 105.588,121.756 " />
    <polygon points="181.334,121.756 146.331,61.128 181.334,0.5 251.341,0.5 
	286.345,61.128 251.341,121.756 " />
    <polygon class="red" points="327.087,121.756 292.083,61.128 327.087,0.5 397.094,0.5 
	432.098,61.128 397.094,121.756 " />
    <polygon points="35.582,377.071 0.578,316.443 35.582,255.815 
	105.588,255.815 140.592,316.443 105.588,377.071 " />
    <polygon class="red" points="181.334,377.071 146.331,316.443 181.334,255.815 
	251.341,255.815 286.345,316.443 251.341,377.071 " />
    <polygon points="327.087,377.071 292.083,316.443 327.087,255.815 
	397.094,255.815 432.098,316.443 397.094,377.071 " />
    <polygon points="111.328,249.413 76.324,188.785 111.328,128.157 
	181.334,128.157 216.338,188.785 181.334,249.413 " />
    <polygon class="red" points="257.081,249.413 222.077,188.785 257.081,128.157 
	327.087,128.157 362.091,188.785 327.087,249.413 " />
  </g>
</svg>

CSS

.shapes {
  fill: #b9b9b9;
  fill-opacity: 1;
  stroke: white;
  stroke-opacity: 1;
  stroke-width: 0.002;
}

.red {
  fill: red
}

JavaScript

var polygons = document.getElementsByTagName("polygon");
var j = 0;
for (i = 0; i < polygons.length; i++) {
console.log( polygons[i].className );
  if (polygons[i].classList.contains( "red" ) )  {
    j++;
  }
};
alert("There are " + j + " red shapes")