JSFiddle - React, Tailwind, and code Playground

HTML

<input type='text' id='username' />
<button onclick="trimAndUpper('username')">Upper And Trim</button>

JavaScript

String.prototype.trim = function () {
    return this.replace(/^\s+|\s+$/g, '');
  };

function trimAndUpper(id){
    var element = document.getElementById(id);
    element.value=element.value.trim().toUpperCase();
}