Passing <textarea> string to Bootstrap Modal using Javascript-CodePudding

Learning Javascript and trying to learn how to pass values. In this example, I have a where a user types a message, for example, and that string is stored and displayed in a Bootstrap Modal. The problem...the last character is cut off unless you press return or spacebar. I have tried adding an empty space at the end of my document.getElementById (line 38)...tried adding a carriage return and new line....I have found several very simple Jquery solutions but it would be nice if I could figure this one out using JS first. Or maybe I should just switch the script to JQuery? I also know my character count isn't working correctly but I'll figure that out later.

Thanks!

//Write a function that shows how many characters are left in the textarea
function charCount() {

//Retrieve the stored value of the string from textarea
var txt = document.getElementById("text-area").value;

//Determine how many characters are in the textarea
var chars = txt.length;

//Subtract the max number of characters from the number of characters entered
var maxLength = 140-chars;

//Show how many characters remain in textarea
document.getElementById("char-count").innerHTML = maxLength   " characters remaining";

//Write textarea string to modal
document.getElementById("modal-body").innerHTML = txt   " ";
}

<!-- Textarea -->
        <div >
          <div >
            <textarea id="text-area" maxlength="140" onkeypress="charCount()"></textarea>
          </div>
        </div>
        <div >
          <div >
            <button  data-bs-toggle="modal" data-bs-target="#myModal">Submit</button>
      
          </div>
          <div >
            <div id="char-count"><!--140 Characters Remaining--></div>
          </div>
        </div>
        <div  id="myModal">
          <div >
            <div >
      
              <!-- Modal Header -->
              <div >
                <h4 >Your Message:</h4>
                <button type="button"  data-bs-dismiss="modal"></button>
              </div>
      
              <!-- Modal body -->
              <div  id="modal-body">
      
              </div>
      
              <!-- Modal footer -->
              <div >
                <button type="button"  data-bs-dismiss="modal">Close</button>
              </div>
      
            </div>
          </div>
        </div>

CodePudding user response：

According to MDN (https://developer.mozilla.org/en-US/docs/Web/API/GlobalEventHandlers/onkeypress), the onkeypress event handler has been deprecated.

Deprecated: This feature is no longer recommended. Though some browsers might still support it, it may have already been removed from the relevant web standards, may be in the process of being dropped, or may only be kept for compatibility purposes

So, in order to avoid the cut of the last character, you can use the onkeyup event handler, which fires when the user releases a key that was previously pressed.

<textarea id="text-area" maxlength="140" onkeyup="charCount()"></textarea>

Fiddle: https://jsfiddle.net/kongallis/e087vdgL/12/