title: HTML reset after form submit
body: <p>today I started learning JavaScript and I want to calculate two numbers from a text field, using JavaScript. I want to display the result as HTML on the website itself. When I use a form to submit the values, it keeps resetting my modified HTML (the result section shows the actual result for a second but keeps switching back to the default value).</p>
  
  <p>This does not happen when using a button. But since I want to add radio buttons to choose from a mathematical operation, I'd prefer a form (I'm also not quite sure how to determine which radio button is checked via JS).</p>
  
  <p>this is my HTML-Form</p>
  
  <pre><code>   &lt;form name="calcForm" onsubmit="calc(num1.value, num2.value)"&gt;
    &lt;input type="text" id="num1"&gt;
    &lt;input type="text" id="num2"&gt;
    &lt;input type="submit" value="submit"&gt;
  &lt;/form&gt;
  </code></pre>
  
  <p>This is my resolution-section (which resets when using a form)</p>
  
  <pre><code>&lt;div id="calcRes" style="display:block;"&gt;Lorem ipsum dolor sit amet&lt;/div&gt;
  </code></pre>
  
  <p>The actual JavaScript function</p>
  
  <pre><code>  function calc(num1, num2) {
    var res = Number(num1)+Number(num2);
    document.getElementById('calcRes').innerHTML = "Result is " + res;
  }
  </code></pre>
  
  <p>As I said above, the result is being displayed when using a button instead of a 'form'</p>
  
  <pre><code>&lt;button onclick="calc(num1.value, num2.value)"&gt;Calculate&lt;/button&gt;
  </code></pre>
  
  <p>I'd like to know why the modified HTML switches back to default, a solution how to avoid this and if there's any "bad practice" in my code. I've also tried to search for this issue but I can't find anything. I guess, this is just a noobish problem but as I said, I'm a complete beginner so please be patient with me.</p>