web app google script can not access html element with javascript function

I have a simple html file with labels and text fields with ids (like firstname id=“fn”, lastname id=“ln”, and address id=“add”). So far my web app runs fine with inline Javascript that gets the value of these elements and stores them in a google sheet. So far “nothing” I try will let me getElementById with the google script. It’s the “exact” same code but one runs inline with the html file and the other one run in an html file in the web app as google script.

I have tried every way possible to getElementById in my google script and it I always get the same answer which is “TypeError: Cannot read properties of undefined (reading ‘firstName’)”. This is the simple code:
var userInfo = {};
userInfo.firstName = document.getElementById(“fn”).value;

This code is to be executed when the user types in his name and address and then clicks the button when done.