vlookup in html form with google script

I am trying to achieve vlookup within html using Google Apps Script and JavaScript.

Scenario - we have Google site in which a html form is designed with Google Apps Script. User will have to enter their ID value in ID field and their name will be auto populated in the name field.only 1 google spreadhsheet file is used. 1 tab is to receive the user's entry another tab got the list of ID & name of the users.

Following are my tries -

1. Google Apps Script

   function FindName(uin) {  var data=Udata.getRange('A2:B').getValues();  var valA=uin;  for(nn=0;nn<data.length;++nn){    if (data[nn][0]==valA){break} ;      }Logger.log(data[nn][1]);return (data[nn][1]);}

2. JavaScript (updated as per @doubleunary's answer)

function fetchName(UName) { var uin = document.getElementById("uin").value; var Uname = FindName(uin); document.getElementById("Name").innerHTML = UName; } google.script.run.withSuccessHandler(fetchName).FindName(); 

3. HTML form code

<div class="mb-1"><label for="uin" class="form-label">Enter  uin:</label><input type="text" id="uin" name="uin" class="form-control form-control-sm" onkeyup="fetchName()" required> </div><div class="mb-1"><label for="Name" class="form-label"> Name:</label>    <input type="text" id="Name1" name="Name1" class="form-control form-control-sm" required> <p>Welcome <span id="Name"></span></p></div>

But onkeyup the name never gets populated.When I feed in the ID value in google script manually and check with debugging the name appears in the log, but in html form it doesn't work, please help!