Quiero hacer un script para insertar emojis en el área de texto al hacer clic. Pero nunca funciona.

¿Alguien puede señalarme dónde estoy haciendo mal?

Gracias.

 <form> <button value="😀">😀</button> <button value="😂">😂</button> <button value="👍">👍</button> <br> <textarea id="text1" cols="40" rows="3" placeholder="This is some dummy text."></textarea> </form> <script type="text/javascript "> let currentInput = document.getElementById('text1'); function insertAtCursor() { let cursorPos = currentInput.selectionStart; let v = currentInput.value; let textBefore = v.substring(0, cursorPos); let textAfter = v.substring(cursorPos, v.length); currentInput.value = textBefore + this.value + textAfter; cursorPos += this.value.length; currentInput.focus(); currentInput.setSelectionRange(cursorPos, cursorPos); }; if (document.querySelector('button')) { document.querySelectorAll('button').forEach((elem, i) => { elem.addEventListener("click", function(event) { insertAtCursor(); }); }); } </script>