0
321
ViewsWhy can I not expand the container?
I use css to expand/collapse containers (ExpandableBoxContainer) within a parent container (SnippetContainer). There is a button in each expandable container for copying the code put in readonly textarea with this code (#248 - #263):
/* Highlight - Copy to Clipboard */
<script>
document.getElementById("SnippetContainer").addEventListener("click", function(e) {
let tgt = e.target.closest("input");
if (tgt && tgt.matches(".copyBtn")) {
const textarea = tgt.nextElementSibling;
textarea.select();
tgt.value = 'COPIED. Paste in SOURCE view!!!';
document.execCommand('copy')
}
else
tgt = e.target.closest("textarea");
if (tgt.matches("[name=code]")) tgt.select()
})
</script>
The page structure is about like this:
<div id="SnippetContainer">
<div class="ExpandableBoxContainer">
<input...>
<textarea>
...code snippet...
</textarea>
</div>
<div class="ExpandableBoxContainer">
<input...>
<textarea>
...code snippet...
</textarea>
</div>
</div>
On expanding the CodeBoxContainer, the console returns:
I can't find the reason and any fix to it.
1 answers
Answer question0
You get the error at if (tgt.matches("[name=code]")) tgt.select() if tgn is null.
tgn is null if you click either at SnippetContainer or a descendant of it that is neither input nor textarea.
You would need to change if (tgt.matches("[name=code]")) tgt.select() to if (tgt && tgt.matches("[name=code]")) tgt.select() to make the error vanish.
But it is not fully clear if the logic that you have in your code is really correct, it at least looks highly suspicious.