how can i know the total number of characters that have been typed into a textarea (including characters that have been deleted)

Question

I am very new to programming so please forgive me if this has a very simple solution. My problem is that i cannot figure out how i can calculate the number of characters that have been typed in the textarea in total (not just at that time). I have used the .value to calculate how many characters have been typed in the textarea at that time. But i want to know the number of characters that have been typed since the program has been running as well. Below is my code which i have shortened for simplicity. I have tried if statements that add +2 if you delete a character. However, i cant get this to work properly.

let textToType = document.getElementById("text-to-type");
let textBox = document.getElementsByClassName("text-box")[0];
// !typedValue shows you how many characters you have typed into the textarea
let typedValue;
let displayText = "Sample text to type"; // This text will add to text-to-type div
// ! displayTextLength is how many characters long the displayText is
let displayTextLength = displayText.length;
let getTextSpan = textToType.getElementsByTagName("span");
let stopwatch = 0;
let popUpReminder = document.getElementsByClassName("reminder")[0];
popUpReminder.style.display = "none";


window.onload = () => {
    for (let i in displayText) {
        const spanTag = document.createElement("span");
        const textNode = document.createTextNode(displayText[i]);
        spanTag.appendChild(textNode);
        textToType.appendChild(spanTag);
    }
};

setInterval(function () {
    stopwatch++;
}, 1000);

const run = () => {
    typedValue = textBox.value;
    let isCorrect = true;

    for (let i in displayText) {
        // This nested loop will prevent red colour to show on the text that isn't  typed yet
        console.log(typedValue.length);
        for (let j in typedValue) {
            if (typedValue.length <= displayText.length) {
                if (typedValue[j] !== displayText[j]) {
                    getTextSpan[j].style.color = "red";
                }
            }
        }

        if (typedValue[i] === displayText[i]) {
            getTextSpan[i].style.color = "#579984";
        } else {
            // Black color for those characters that didn't typed yet.
            getTextSpan[i].style.color = "black";
        }

        // reminder
        let typedValueLength = typedValue.length;
        if (typedValueLength > displayTextLength) {
            console.log("To complete the typing test you must complete type the text displayed without any typos.");
            popUpReminder.style.display = "block";
        }
    }

    // Makes it so that you need to type whats displayed to complete the typing test.
    if (typedValue === displayText) {
        console.log("TYPING COMPLETE");
        console.log("It took you " + stopwatch + " seconds to complete.");
    }
};

<textarea class="text-box" rows="8" cols="55" oninput="run()"></textarea>

Answer 1

There is no straight forward solution to get the total number of characters that are typed in textarea including "deleted" characters

To keep track of the total number of characters typed in a textarea, including those deleted, you can use an event listener for the ‘input’ event. This event is triggered every time the user types or deletes a character in the textarea.

Here’s a simple example:

let totalTypedCharacters = 0;

document.querySelector('textarea').addEventListener('input', function(e) {
    totalTypedCharacters += e.data ? e.data.length : -1;
    console.log(totalTypedCharacters);
});

In this code, e.data contains the characters that were inserted. If characters were deleted, e.data is null and we subtract 1 from the total (assuming one character is deleted at a time).

This will give you the total number of characters typed in the textarea since the program started running, including those that have been deleted.

Note: this is a simplified solution. If multiple characters are deleted at once (for example, using backspace to delete a selection), this code will only subtract 1 from the total. Handling such cases would require a more complex solution