要添加其他人已经发布的内容，现在习惯于添加 addEventListener 对元素而不是内联使用函数调用。这里我使用了一个函数，名为 handleClick 它在单击按钮时调用，并将缓存的输入元素的值（从字符串强制为数字）附加到 div 在页面上而不是使用 document.write .
如果您的脚本在 head html的一部分将其移动到 </body> 标记，以便dom可以加载，javascript可以缓存加载的元素。

// Cache the elements
const button = document.querySelector('button');
const result = document.querySelector('#result');
const a = document.querySelector('#fnum');
const b = document.querySelector('#snum');

// Add an event listener to the button that calls the function
button.addEventListener('click', handleClick, false);

function handleClick(e) {

  // Prevent the form from submitting
  e.preventDefault();

  // Display the result
  result.textContent = Number(a.value) + Number(b.value);
};

<form>
  <label for="fnum">first Number:</label>
  <input type="number" id="fnum" name="fnum" placeholder="first num" /><br /><br />
  <label for="snum">second num:</label>
  <input type="number" id="snum" placeholder="second num" name="snum" /><br /><br />
  <button id="btn">add</button>
</form>
<div id="result" />

document.write 将更改整个正文，而不是使用在提交时编辑的单独元素。
还有,因为 .value 返回一个字符串，我们需要将这些值转换为整数以将它们相加，因此 c = +a + +b .
这个 const ad = (a, b) => (c = a + b); 没有那么大意义，它定义了一个函数， let c = +a + +b; 应该没问题。

function ad(event) {

  // Prevent form submit
  event.preventDefault();

  // Get fields
  let a = document.querySelector("#fnum").value;
  let b = document.querySelector("#snum").value;

  // Sum
  let c = +a + +b;

  // Show
  document.getElementById('sum').innerHTML = 'Sum: ' + c;

  // Reset form
  event.target.parentNode.reset()
}

<form action="">
  <label for="fnum">first Number:</label>
  <input
    type="number"
    id="fnum"
    name="fnum"
    placeholder="first num"
  /><br /><br />
  <label for="snum">second num:</label>
  <input
    type="number"
    id="snum"
    placeholder="second num"
    name="snum"
  /><br /><br />
  <!-- <label for="btn">Button</label> -->
  <button id="btn" onclick="ad(event)">add</button>
</form>

<em id='sum'></em>

页面加载后不能使用document.write。它会擦干净这一页
您需要一个事件来触发求和，并且需要在事件处理程序中获取值，而不是在它之外
我将这些值添加到span元素中，以便在提交时重置表单

window.addEventListener("load", function() { // page load
  document.getElementById("form1").addEventListener("submit", e => { // better than the button click
    e.preventDefault(); // stop submission
    const a = document.getElementById("fnum").value;
    const b = document.getElementById("snum").value;
    document.getElementById("result").innerHTML = `${a}+${b} = ${+a + +b}`; // cast to number - I use template literals to create a string
    e.target.reset(); // clear the form
  })
})

<form id="form1">
  <label for="fnum">first Number:</label>
  <input type="number" id="fnum" name="fnum" placeholder="first num" /><br /><br />
  <label for="snum">second num:</label>
  <input type="number" id="snum" placeholder="second num" name="snum" /><br /><br />
  <button>add</button>
</form>
<span id="result"></span>

您需要添加 write 调用事件处理程序。此外，如果按钮正在表单中使用，则应使用submit事件。此外，您还需要在添加整数值之前对其进行缩减，因为它们将被视为字符串串联。
我还将使用javascript将处理程序附加到表单，以访问事件对象。这允许您在将内容写入页面后，防止表单的默认提交被导航到别处。

const form = document.forms['calc'];

const handleSubmit = (e) => {
  e.preventDefault();
  const
    [ fnum, snum ] = form.elements,
    result = parseInt(fnum.value, 10) + parseInt(snum.value, 10);
  document.write(result);
};

form.addEventListener('submit', handleSubmit);

html, body {
  width: 100%;
  height: 100%;
  margin: 0;
  padding: 0;
}

body {
  display: flex;
  justify-content: center;
  align-items: center;
}

form {
  display: grid;
  grid-template-columns: 1fr;
  grid-row-gap: 0.25em;
}

label {
  display: grid;
  grid-template-columns: 7em 1fr;
}

<form name="calc">
  <label for="fnum">
    First number:
    <input type="number" id="fnum" name="fnum" placeholder="First number..." />
  </label>
  <label for="snum">
    Second number:
    <input type="number" id="snum" name="snum" placeholder="Second number..."  />
  </label>
  <button id="btn">Add</button>
</form>