JSFiddle - React, Tailwind, and code Playground

by Blueprinter

HTML

<input onkeypress="searchKeyPress(event);" type='text' id='divForOnHoldKey' placeholder='Enter Verification Code If Changed Email:'>
<button id='btnChkVerifyCode' onmouseup='fncChkVrification()'>Hit Enter after pasting or typing the Code. Or Click Here.</button>
 <br>
 <br>
<div id='idVeryfyMsgDiv'>For Messages to User</div>
     
<br>
<br>
    <p>INSTRUCTIONS: Click in the box, then press the Enter Key.  If nothing is in the box, the message will state that The Field is Empty!.  The code runs when either the enter key is pressed when the field has the focus, or the button is clicked.  If there is something in the box, the message will change to something else.  Try it with both nothing and something in the input field.</p>

CSS

#divForOnHoldKey {
  color: black;
  font-weight: bold;
  line-height:140%;
  height:28px;
  border: 1px solid black;
  background-color: #FF0000;
  width: 90%;
  margin-left: 5%;
  margin-right: 5%;
  overflow: auto;
}

#btnChkVerifyCode {
  width: 50%;
  margin-left: 25%;
}

#idVeryfyMsgDiv {
  color:blue;
  width: 50%;
  margin-left: 25%;
}

JavaScript

window.searchKeyPress = function(e) {

  if (e.keyCode === 13) {
    //alert('The enter key was prssed');
    fncChkVrification();
  };
};

window.fncChkVrification = function() {
alert('The verify code function ran: ');

  //console.log('fncChkVrification ran: ');
  var getVrfyChkCode = document.getElementById('divForOnHoldKey').value;
  document.getElementById('idVeryfyMsgDiv').textContent = '';
  
  if (!!getVrfyChkCode) {
        document.getElementById('idVeryfyMsgDiv').textContent = 'A Code is Present in the Box. And the Log In status is being checked';
  } else {
    document.getElementById('idVeryfyMsgDiv').textContent = 'The Field is Empty';
  };
};