Comment by runarberg

3 days ago

Unlike <div> and <span>, <output> becomes part of the form and you can target it as a named form item, e.g.

    <form id="my-form">
      <input name="number" type="number">
      <output name="result"></output>
    </form>

    <script>
      const myForm = document.getElementById("my-form");
      const inputField = document.elements.namedItem("number");
      const outputField = document.elements.namedItem("result");

      outputField.textContent = inputField.valueAsNumber ** 2;
    </script>

1 comment

runarberg

Reply
runarberg  2 days ago

Too late to edit, but there is a mistake s/document.elements/myForm.elements/r :

    -   const inputField = document.elements.namedItem("number");
    -   const outputField = document.elements.namedItem("result");
    +   const inputField = myForm.elements.namedItem("number");
    +   const outputField = myform.elements.namedItem("result");