I have a question for you: why is it that when clicking on another tag for a font, it is not recorded in the textarea when clicking on Syne Tactile works?

document.querySelector("y").onclick= function(what) {
  let tag= what.target.getAttribute("st");
  let sel= document.querySelector("textarea").value.slice(document.querySelector("textarea").selectionStart, document.querySelector("textarea").selectionEnd);
  document.querySelector("textarea").setRangeText(`<span style="font-family: ${tag};">${sel}</span>`);
<div class="context-menu-open">  <ul>    <li>      <y>        <p st="Syne Tactile">Syne Tactilep>   </y>    </li>    <li>      <y>        <p st="Permanent Marker">Permanent Marker

</y> </li> <li> <y> <pst="Festive">Festive

</y> </li> <li> <y> <p st="Gideon Roman">Gideon Roman

</y> </li> <li> <y> <p st="Zen Kaku Gothic Antique">Zen Kaku Gothic Antique

</y> </li> <li> <y> <p st="Roboto Serif">Robot Serif

</y> </li> <li> <y> <p st="Roboto Condensed">Roboto Condensed

</y> </li> <li> <y> <p st="Rowdies">Rowdies

</y> </li> <li> <y> <p st="Roboto Mono">Roboto Mono

</y> </li> <li> <y> <p st="Redressed">Redressed

</y> </li> <li> <y> <p st="Playfair Display">Playfair Display

</y> </li> <li> <y> <p st="Shizuru">Shizuru

</y> </li> <li> <y> <p st="Mukta">Mukta

</y> </li> <li> <y> <p st="Akaya Telivigala">Akaya Telivigala

</y> </li> <li> <y> <p st="Inconsolata">Inconsolata

</y> </li> <li> <y> <p st="Quintessential">Quintessential

</y> </li> <li> <y> <p st="Bebas Neue">Bebas Neue

</y> </li> <li> <y> <pst="Anton">Anton

</y> </li> <li> <y> <pst="Lobster">Lobster

</y> </li> <li> <y> <p st="Dancing Script">Dancing Script

</y> </li> <li> <y> <p st="Supermercado One">Supermercado One

</y> </li> <li> <y> <p st="Comfort">Comfortaa

</y> </li> <li> <y> <pst="Pacifico">Pacifico

</y> </li> <li> <y> <p st="Shadows Into Light">Shadows Into Light

</y> </li> <li> <y> <p st="Architects Daughter">Architects Daughter

</y> </li> <li> <y> <p st="Indie Flower">India Flower

</y> </li> <li> <y> <p st="Abril Fatface">Abril Fatface

</y> </li> <li> <y> <p st="Caveat">Caveat

</y> </li> <li> <y> <p st="Play">Play

</y> </li> <li> <y> <p st="Satisfy">Satisfy

</y> </li> <li> <y> <p st="Alfa Slab One">Alfa Slab One

</y> </li> <li> <y> <p st="Amatic SC">Amatic SC

</y> </li> <li> <y> <p st="Righteous">Righteous

</y> </li> <li> <y> <p st="Cookie">Cookies

</y> </li> <li> <y> <p st="Space Mono">Space Mono

</y> </li> <li> <y> <p st="Kaisei Decol">Kaisei Decol

</y> </li> <li> <y> <p st="Great Vibes">Great Vibes

</y> </li> <li> <y> <p st="Courgette">Courgette

</y> </li> <li> <y> <p st="Russo One">Russo One

</y> </li> <li> <y> <p st="Kaushan Script">Kaushan Script

</y> </li> </ul></div><textarea></textarea>
  • Answer # 1

    "I have a question for you:" -How many elements have you assigned an event handler to?on click?

  • Answer # 2

    "I have a question for you:" -How many elements have you assigned an event handler to?on click?