kann das Kontrollkästchen nicht deaktivieren (Inhalt ausblenden, während das Kontrollkästchen deaktiviert ist)

Question

Ich möchte den div-Inhalt ausblenden, während das Kontrollkästchen deaktiviert ist.

document.getElementById("checkFocus").onchange = function() { 

var one = document.getElementById("focus"); 
    if (document.getElementById("checkFocus").checked === true) { 
     one.style.display = "block"; 
    } 
    else one.style.display = "none"; 
} 

Und es funktioniert: Here's my code

Ich habe fast die gleiche Funktion für die div mit id "Fokus" (großer grauer Rahmen) gemacht! So

, ich verstehe nicht, warum die nächste Funktion überhaupt nicht funktioniert:

document.getElementById("checkMass").onchange = function() { 

var elem = document.querySelector("PeriodicTable") 
var mass = elem.querySelectorAll("div.element > div.mass"); 
    if (document.getElementById("checkMass").checked === true) { 
     mass.style.display = "block"; 
    } 
    else mass.style.display = "none"; 
} 

Was mache ich falsch?

Answer 1

elem.querySelectorAll("div.element > div.mass"); gibt kein einzelnes Element zurück, es gibt eine Auflistung aller Übereinstimmungen zurück.

Das heißt nicht mass.style.display auf einem Array tun, nur auf einem einzigen Element, so dass Sie

if (document.getElementById("checkMass").checked === true) { 
    for (var i = 0; i < mass.length; i++) { 
     mass[i].style.display = "block"; 
    } 
else { 
    for (var i = 0; i < mass.length; i++) { 
     mass[i].style.display = "none"; 
    } 
} 

stattdessen tun müssen.

Answer 2

Die querySelector("Any CSS rule") eine Regel benötigt, . signify Klasse, # id bedeuten, aber Sie haben querySelector("PeriodicTable"). Sie suchen nach Elementen mit dem Tagnamen PeriodicTable. Entweder verwenden document.getElementById('PeriodicTable') oder querySelector("#PeriodicTable")

https://developer.mozilla.org/en-US/docs/Web/API/Document/querySelector