0

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: enter image description here

I can't find the reason and any fix to it.

A-Tech
  • 806
  • 6
  • 22
Martin Sereday
  • 47
  • 4
  • Run your script after `DOMContentLoaded`. – Dai Mar 12 '22 at 09:09
  • `if (tgt.matches("[name=code]"))` is disconnected from the `if`–`else` before. `tgt` may indeed be `null` at this point. Did you mean `else { tgt = e.target.closest("textarea"); if(tgt.matches("[name=code]")){ tgt.select(); } }`? – Sebastian Simon Mar 12 '22 at 09:13
  • 1
    @Dai If that was the issue the error would’ve been _“Cannot read property `addEventListener` of `null`”_ and be unrelated to `tgt`. – Sebastian Simon Mar 12 '22 at 09:14
  • What do you expect `closest` is doing? And why it should find an `input` element? – t.niese Mar 12 '22 at 09:19
  • `e.target.closest("input")` will only ever return a DOM element if you clicked inside an `` element. Otherwise it will always get you `null`. – Carsten Massmann Mar 12 '22 at 09:19
  • @SebastianSimon aaah, whoops! – Dai Mar 12 '22 at 09:22
  • As these numerous comments illustrate already: it _always_ makes sense to provide an [MCVE](https://stackoverflow.com/help/mcve) - instead of "The page structure is about like this". – Carsten Massmann Mar 12 '22 at 09:28

1 Answers1

1

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.

t.niese
  • 39,256
  • 9
  • 74
  • 101
  • Thaks a ot. That't it. The whole thing had worked before. It did what it was expected to do, just te console had reported this error. Now it reports anything. DEMO: https://cmsimple.sk/tests/snippets – Martin Sereday Mar 13 '22 at 10:27