Why is my onclick not deleting any of my classes?

Question

I have a huge problem here.
I can't get my onclick to work the way I want. So I hope someone here can help me.

<a href="#" onclick="document.getElementsByClassName('nice').style.display='none';" class="sorter">#NiceToKnow</a>

<div id="cards" class="nice"></div>
<div id="cards" class="nice"></div>
<div id="cards" class="nice"></div>
<div id="cards" class="video"></div>

I want it displayed: none; each of my class = "good", so you can only see class = "video", but nothing happens at all.

Answer 1

, . , , javascript , DOM, CSS, . getElementsByClassName , . , .

function changeNice(){
//ASSIGN ELEMENTS TO ARRAY
elementsofClass=document.getElementsByClassName('nice');
for(i=0; i<elementsofClass.length; i++){
    //HIDE SELECTED ELEMENT
    elementsofClass[i].style.display='none';
  
  
}}

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

<div id="cards1" class="nice">TEST 1</div>
<div id="cards2" class="nice">TEST 2</div>
<div id="cards3" class="nice">TEST 3</div>
<div id="cards4" class="video">I don't HIDE</div>

Hide result

ID. .

Answer 2

getElementsByClassName , .

. . .

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
    }
}

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

<div id="cards1" class="nice">Test Content</div>
<div id="cards2" class="nice">Test Content</div>
<div id="cards3" class="nice">Test Content</div>
<div id="cards4" class="video">Test Video Content</div>

Hide result

DEMO

Answer 3

- :

var elems = document.getElementsByClassName('nice');
for(var i = 0; i < elems.length; i++) {
    elems[i].style.display = 'none'
}

, getElementsByClassName.

jsfiddle

Answer 4

, nice, none : https://jsfiddle.net/7vf9pz8u/

<script>
    function hide(){
    for(ct=0; ct < 3; ct++){
    document.getElementsByClassName('nice')[ct].style.display='none'
    }
    }
</script>

Answer 5

getElementsByClassName returns an array of all matching elements, so you will need to specify an index or skip all of them to change their property.

Change your code to

document.getElementsByClassName('nice')[0].style.display='none'

// For each item

var e = document.getElementsByClassName('nice');
for (i = 0; i < e.length; i++) {
  e[i].style.display = "none";
}

Answer 6

Since your divs do not have unique names, they are in map arrays []. Therefore, to access a specific div, you need to reference the array to that particular div. The requested solution should work.