TypeError: Cannot read properties of null (reading 'classList')

[VladimirAlexiev]

• @HolgerKnublauch @nicholascar This should be high prio since it hides the examples if one switches Turtle/JSON-LD
• Pinging @smessie as this may be related to latest dark mode changes in respec? But I didn't use dark mode
  support for light/dark mode #497

Steps (Chrome Version 140.0.7339.208 (Official Build) (64-bit) on Windows)

• Open the browser dev tools (control-shift-J)
• go to https://raw.githack.com/w3c/data-shapes/master/shacl12-core/index.html#example-6
• the console shows:

The resource https://www.w3.org/Tools/respec/respec-highlight was preloaded using link preload but not used within a few seconds from the window's load event. Please make sure it has an appropriate `as` value and it is preloaded intentionally.

• click on JSON-LD
• Browser says "Paused in debugger" and shows this:

• click back on Turtle: no code block is shown
• the console shows:

index.html#example-6:1 Unchecked runtime.lastError: A listener indicated an asynchronous response by returning true, but the message channel closed before a response was receivedUnderstand this error
respec.js:6 TypeError: Cannot read properties of null (reading 'classList')
    at button.onclick (index.html:100:53) "Uncaught TypeError: Cannot read properties of null (reading 'classList')" ErrorEvent {isTrusted: true, message: "Uncaught TypeError: Cannot read properties of null (reading 'classList')", filename: 'https://raw.githack.com/w3c/data-shapes/master/shacl12-core/index.html', lineno: 100, colno: 53, …}
(anonymous) @ respec.js:6Understand this error
index.html:100 Uncaught TypeError: Cannot read properties of null (reading 'classList')
    at button.onclick (index.html:100:53)

[smessie]

Before delving deeper into this issue, I wonder if it could be caused by removing the JSON-LD examples in #583 instead of adding the dark mode support.
If I take one such graph and add a <div class=“jsonld”>TODO</div> again, I don’t encounter the error anymore, and switching back and forth between Turtle and JSON-LD works seamlessly.
I think it is because the menu bar displays both Turtle and JSON-LD, but there is no div element defined with the class jsonld, hence the "Cannot read properties of null"-error.

[smessie]

To properly fix this, we probably want to remove the JSON-LD option in the menu bar as long as we have no JSON-LD examples by removing this line in each HTML document.

data-shapes/shacl12-core/index.html

Line 82 in efd1f30

<button data-selects="jsonld">JSON-LD</button>

Let’s then not forget to add this line <button data-selects=“jsonld”>JSON-LD</button> again to the selectors.innerHTML in the HTML documents, as part of #581.