Template Literals - Changing the Inner HTML of an element (onInput event)

Question

So I´ve never used Template Literals before, but I need to work with a template now that seemingly includes a form with Template Literals

This is one of my inputs:

<input
        type="number"
        className="mf-input "
        min="1900"
        max="2099"
        step="1"
        id="curyear"
        name="currentyear"
        placeholder="${ parent.decodeEntities(`Current Year`) } "
        onInput=${parent.handleChange}
        aria-invalid=${validation.errors['currentyear'] ? 'true' : 'false'}
        ref=${el => parent.activateValidation({"message":"This field is required.","minLength":1900,"maxLength":2099,"type":"by_character_length","required":false,"expression":"null"}, el)}
            />

            <${validation.ErrorMessage}
          errors=${validation.errors}
          name="currentyear"
          as=${html`<span className="mf-error-message"></span>`}
          />

What I am trying to do is, in the onInput method, instead of handling the validation, I also want to change the innerHTML of an element:

  <h2 class="elementor-heading-title elementor-size-default" id="curyeartext">Current Year</h2>     

I´ve been trying to do it for hours, but I can't get it to work.

EDIT: turns out, they are template literals and not reactJS

Answer 1

I managed to do this by adding a function above the return:

  function myfunction() {
      document.querySelector('#curyeartext').innerHTML = document.querySelector('#curyear').value;
      document.querySelector('#lastyear').innerHTML = document.querySelector('#curyear').value-1;
      document.querySelector('#yearbefore').innerHTML = document.querySelector('#curyear').value-2;
    }

And call it in the onInput event handler

onInput=${myfunction}