I am currently working on a project where I need to call a script function on an event. This function is called when text is pasted into a textarea. The function copies the pasted text into an array and iterates through the array looking for the code value of Unicode right apostrophe (8217). It then replaces any found right apostrophe's with a single quote. The function works as expected. However I am running this function on 8 different pages and want to clean my code up. I placed the script into a js file that is called on every page in the project so if any more cases it is needed are found it will be easy to implement.

The function is being called with:

<script>
    var instructions = document.getElementById("specialInstructions");
    instructions.addEventListener("paste", pasteToPlainText);
</script>

The function in the js file is:

function pasteToPlainText(event){
    var plainText;
    var replaceList;
    replaceList = new Array();
    
    //converts the pasted text to plain text
    if (event.clipboardData && event.clipboardData.getData){
        
        plainText = event.currentTarget.clipboardData.getData('text/plain');
    }else if (window.clipboardData){
        
        plainText = event.currentTarget.clipboardData.getData('text/plain');
    }
    
    for (var index = 0; index < plainText.length; index++){
        
        var rightApostropheCheck = plainText.charCodeAt(index);
        //Unicode for right apostrophe is 8217 (Used in outlook email)
        //Without this conversion a right apostrophe is put on screen.
            // The note is unable to save with a right apostrophe
        if (rightApostropheCheck == 8217){
            // replaces a right apostrophe with a single quote (apostrophe)
            replaceList.push("'");
        }else{
            // pushes all other text to the list that is printed to screen
            replaceList.push(plainText[index]);
        }
    }
    event.preventDefault();

    if (event.clipboardData) {
        
        content = replaceList.join("");
        document.execCommand('insertText', false, content);
        
    }else if (window.clipboardData) {
        
        content = replaceList.join("");
        document.selection.createRange().pasteHTML(content);
    }   
}

I get the error: Uncaught TypeError: Cannot read properties of undefined (reading 'clipboardData') On the first if statement.

Any help or advice will be greatly appreciated. Thank you.

Update: I found a solution. making the event listener with a bind statement makes sure the function is not called on load. That was the problem as the page loaded the function was called without any information. so it had undefined errors and null errors. The correct way to call the function is as follows.

<script>
    var terms = document.getElementById("Terms");    
    terms.addEventListener("paste", pasteToPlainText.bind(terms));
</script>