Why wont my onclick not remove any of my classes?

by Kishore Sahasranaman

HTML

<a href="#" onclick="hideAllniceClass();" class="sorter">#NiceToKnow</a>

<div id="cards" class="nice">Test Content</div>
<div id="cards" class="nice">Test Content</div>
<div id="cards" class="nice">Test Content</div>
<div id="cards" class="video">Test Video Content</div>

JavaScript

window.hideAllniceClass = function () {
    var elems = document.getElementsByClassName('nice');
    for (var i = 0; i != elems.length; ++i) {
        elems[i].style.display = "none"; // hidden has to be a string
    }
}