How to execute script only after button onclick?

I have a script that auto-replaces specific characters like double spaces into single space and straight quotes into smart quotes in the textarea

However, when I try to add onclick feature, it’s not working for me, it’s still executing it before the click of a button (the moment it detects the character).

Here’s what my it looks like right now:

        function fixtext() {
            let textarea = document.getElementById("textarea1");
            textarea.select();
            document.execCommand("fixtext");
        }
    
    window.addEventListener('DOMContentLoaded', function(e) {
          var area = document.getElementById("textarea1");

          var getCount = function (str, search) {
              return str.split(search).length - 1;
          };

          var replace = function (search, replaceWith) {
              if (typeof(search) == "object") {
                  area.value = area.value.replace(search, replaceWith);
                  return;
              }
              if (area.value.indexOf(search) >= 0) {
                  var start = area.selectionStart;
                  var end = area.selectionEnd;
                  var textBefore = area.value.substr(0, end);
                  var lengthDiff = (replaceWith.length - search.length) * getCount(textBefore, search);
                  area.value = area.value.replace(search, replaceWith);
                  area.selectionStart = start + lengthDiff;
                  area.selectionEnd = end + lengthDiff;
              }
          };

          area.addEventListener("input", function (e) {
              replace(" ,", ",");
              replace(" ;", ";");
              replace(" .", ".");
              replace("  ", " ");
              replace("   ", " ");
              replace("--", "—");
              replace(/(^|[-u2014s(["])'/g, "$1u2018");
              replace(/'/g, "u2019");
              replace(/(^|[-u2014/[(u2018s])"/g, "$1u201c");
              replace(/"/g, "u201d");
          });
        });

<textarea id="textarea1" cols="40" rows="8"></textarea>
<button class="cbtn" title="Fix text" onclick="fixtext()">Fix text</button>

I really want it to work only after the user clicks the button, and not auto-replace before it. Please tell me how to fix this bug?

Answer

your function that replaces the content of the textarea is called in a input listener, so you should get it out in a separate function and call that function in the fixText function

function fixTextarea(textarea) {
    textarea.value = textarea.value.replace(" ,", ",")
        .replace(" ;", ";")
        .replace(" .", ".")
        .replace("  ", " ")
        .replace("   ", " ")
        .replace("--", "—")
        .replace(/(^|[-u2014s(["])'/g, "$1u2018")
        .replace(/'/g, "u2019")
        .replace(/(^|[-u2014/[(u2018s])"/g, "$1u201c")
        .replace(/"/g, "u201d")
};



function fixtext() {
    let textarea = document.getElementById("textarea1");
    textarea.select();
    fixTextarea(textarea);
}

window.addEventListener('DOMContentLoaded', function (e) {
    var area = document.getElementById("textarea1");

    var getCount = function (str, search) {
        return str.split(search).length - 1;
    };

    var replace = function (search, replaceWith) {
        if (typeof (search) == "object") {
            area.value = area.value.replace(search, replaceWith);
            return;
        }
        if (area.value.indexOf(search) >= 0) {
            var start = area.selectionStart;
            var end = area.selectionEnd;
            var textBefore = area.value.substr(0, end);
            var lengthDiff = (replaceWith.length - search.length) * getCount(textBefore, search);
            area.value = area.value.replace(search, replaceWith);
            area.selectionStart = start + lengthDiff;
            area.selectionEnd = end + lengthDiff;
        }
    };

});

<textarea id="textarea1" cols="40" rows="8"></textarea>
<button class="cbtn" title="Fix text" onclick="fixtext()">Fix text</button>