Variables only exist in that format when they have been set by a prior submission or workflow. To support dynamic field values without submitting the form, the code you want to use looks like this:

Set the IDs at the top to the fields you need. The updateHTML function will define the logic needed to create the link, and you can reuse it right away (to support default fields) and onFieldChange (to handle when the field is modified by the user).

const watchFieldId = 2;
const htmlLinkFieldId = 3;

const updateHTML = async (htmlFieldId, fieldValue, linkText) => {
  const link = `https://mywebsite/forms/testform?test=${fieldValue}`;
  const text = linkText ?? link;
  await LFForm.changeFieldSettings(
    { fieldId: htmlFieldId },
    {
      content: `<a href="${link}">${text}</a>`,
    }
  );
};

LFForm.onFieldChange(
  async () => {
    const value = LFForm.getFieldValues({ fieldId: watchFieldId });
    const fieldValue = Array.isArray(value) ? value[0] : value;
    if (fieldValue) {
      await updateHTML(htmlLinkFieldId, fieldValue);
    }
  },
  { fieldId: watchFieldId }
);
// Handle default values if needed
const value = LFForm.getFieldValues({ fieldId: watchFieldId });
const fieldValue = Array.isArray(value) ? value[0] : value;
if (fieldValue) {
  updateHTML(htmlLinkFieldId, fieldValue);
}