Javascript, add alert on result

Question

I created an HTML page and added 3 text boxes in which the user will input 3 numbers :a,b,c

I add a button that, on click, will calculate ((a*b) + (b*c)) / (a+b). The result will be displayed in an alert. I code this on HTML:

function verify() {
  const multiplyForm = document.querySelector('#multiply-form');
  const product = document.querySelector("#calc-result");

  multiplyForm.addEventListener('submit', event => {
    const formData = new FormData(event.target);
    const a = Number(formData.get('a'));
    const b = Number(formData.get('b'));
    const c = Number(formData.get('c'));
    product.value = ((a * b) + (b * c)) / (a + b);
    event.preventDefault();
  });
}

<form id="multiply-form">
  <div class="formrow">
    <label for="Nr1" class="labelstyle">Nr1:</label>
    <input type="number" name="a" id="Nr1" class="textbox1style" />
  </div>
  <div class="formrow">
    <label for="Nr2" class="labelstyle">Nr2: </label>
    <input type="number" name="b" id="Nr2" class="textbox2style" />
  </div>
  <div class="formrow">
    <label for="Nr3" class="labelstyle">Nr3: </label>
    <input type="number" name="c" id="Nr3" class="textbox3style" />
  </div>
  <div class="formrow">
    <label for="calc-result">Result: </label>
    <output id="calc-result" for="Nr1 Nr2 Nr3"></output>
  </div>
  <div class="formrow">
    <button onclick="verify()">Verify</button>
  </div>
</form>

Everything went only because the answer is not given in an alert. The question is why they do not display it in the alert?

Answer 1

As the other posters noted, you should have the code run at page load and remove the onclick="verify()" from the button and add an alert()

  const multiplyForm = document.querySelector('#multiply-form');
  const product = document.querySelector("#calc-result");

  multiplyForm.addEventListener('submit', event => {
    const formData = new FormData(event.target);
    const a = Number(formData.get('a'));
    const b = Number(formData.get('b'));
    const c = Number(formData.get('c'));
    product.value = ((a * b) + (b * c)) / (a + b);
    event.preventDefault();
    alert(product.value);
  });

<form id="multiply-form">
  <div class="formrow">
    <label for="Nr1" class="labelstyle">Nr1:</label>
    <input type="number" name="a" id="Nr1" class="textbox1style" />
  </div>
  <div class="formrow">
    <label for="Nr2" class="labelstyle">Nr2: </label>
    <input type="number" name="b" id="Nr2" class="textbox2style" />
  </div>
  <div class="formrow">
    <label for="Nr3" class="labelstyle">Nr3: </label>
    <input type="number" name="c" id="Nr3" class="textbox3style" />
  </div>
  <div class="formrow">
    <label for="calc-result">Result: </label>
    <output id="calc-result" for="Nr1 Nr2 Nr3"></output>
  </div>
  <div class="formrow">
    <button onclick="">Verify</button>
  </div>
</form>