Javascript in html card

Configuration Frontend
1

Hi everyone,

I’m working on a custom HTML and JavaScript setup in Home Assistant, but I’m struggling to retrieve the value of a form field. I believe it has something to do with shadowRoot, which is beyond my current understanding. My goal is to get the value of the form field when a button is clicked. Could someone help me with this?

Here’s my current code:

type: custom:html-template-card
ignore_line_breaks: true
content: >
  <form>
    <label for="fname">First name:</label><br>
    <input id="test_fname" type="text" name="fname"><br>
    <label for="lname">Last name:</label><br>
    <input id="test_lname" type="text" name="lname"><br>
    <input type="button" value="Submit" onClick="alert('Value: ' + document.getElementById('test_fname').value);" />
  </form>

Any guidance would be greatly appreciated!