JS fetch FormData

<!DOCTYPE html>
<html lang="en-US">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />

    <style>
      * {
        box-sizing: border-box;
      }
      body {
        background-color: black;
      }
      .container {
        width: 15em;
        height: 18em;
        margin: 2em;
        padding: 1em;
        border: 2px solid gray;
        border-radius: 1em;
        background-image: linear-gradient(45deg, rgba(220,220,220,1) 0%, rgba(10,10,10,1) 100%);
      }
      label, input, button {
        display: block;
        margin: 0.5em;
        font: 300 1.1em/1.4 monospace;
      }
      input, button {
        width: 12em;
      }
      label {
        color: white;
      }
      button {
        margin: 2em 0.5em 1em 0.5em;
        height: 2em;
        border-radius: 0.5em;
      }
      .result {
        width: 6.5em;
        height: 2em;
        padding: 0.5em;
        margin: 0 0.25em;
        background-color: rgba(50,50,50,0.5);
        border: 2px solid rgba(0,0,0,0);
        border-radius: 0.25em;
        color: yellow;
        font: 700 2em/1.1 monospace;
        text-align: center;
      }
      .result .post-data-error {
        color: red;
        font: 700 1em/1.05 monospace;
      }
    </style>
  </head>
  <body>

    <div class="container">
      <form>
        <label for="one">Input first number</label>
        <input type="text" id="one" name="one" required value="20" />
        <label for="two">Input second number</label>
        <input type="text" id="two" name="two" required value="2022" />

        <button type="submit">Add numbers</button>
      </form>

      <pre class="result"></pre>
    </div>

    <script>
      let form_, button_add, pre_result;

      window.addEventListener('load', load);
      function load() {
        form_ = document.querySelector('form');
        button_add = form_.querySelector('button');
        pre_result = document.querySelector('.result');

        form_.addEventListener('submit', addNumbers);
      }

      function addNumbers(e) {
        // Prevent the event from submitting the form,
        // no redirect or page reload
        e.preventDefault();

        button_add.disabled = true;
        pre_result.textContent = '';

        const formatted_data = new FormData(form_);
        postData(formatted_data);
      }

      async function postData(formatted_data) {
        try {
          // add_numbers.php => JS fetch FormData [ $_POST ]
          // https://pastebin.com/1h9SCDYb
          // add_numbers.php =>  JS fetch FormData [ $_SESSION ]
          // https://pastebin.com/wP8MdwDr
          const response = await fetch('add_numbers.php', {
            method: 'POST',
            body: formatted_data
          });

          const data = await response.text();
          if (parseInt(data))
            pre_result.textContent = data;
          else
            throw "Returned incorrect value";
        } catch(err) {
          console.warn('postData:\n' + err);

          pre_result.innerHTML = '';
          const span = document.createElement('SPAN');
          span.className = 'post-data-error';
          span.textContent = 'Error';
          pre_result.appendChild(span);
        } finally {
          setTimeout(_=> {
            button_add.disabled = false;
          }, 500);
        }
      }
    </script>
  </body>
</html>