JavaScript如何在页面首次加载时处理表单预填值并渲染计算结果

你只需要在现有JS代码中补充一行主动调用showMsg()的逻辑即可实现需求，原因是当前showMsg()仅绑定了输入框的键盘输入事件，页面加载时没有主动执行，自然不会计算预填值的结果。

更稳妥的实现方式是监听DOM加载完成事件后再调用函数，避免JS加载时DOM还未解析完成导致找不到元素报错，修改后的完整JS代码如下：

let name = "pizza";
document.getElementById("name").innerHTML = name;

function showMsg() {
  var many = document.getElementById('howMany').valueAsNumber;
  var weight = document.getElementById('weight').valueAsNumber;
  var water = document.getElementById('water').valueAsNumber;
  var yeast = document.getElementById('yeast').valueAsNumber;
  var oil = document.getElementById('oil').valueAsNumber;
  var salt = document.getElementById('salt').valueAsNumber;
  let myText = "<p><hr><p>The method is simple, but takes some ... and so on...";

  document.getElementById('intro').innerHTML = 'So you want to make ' + many + ' pizza of ' + weight + 'g each, here is what you need:<p>';
  document.getElementById('Flour').innerHTML = 'Flour: ' + ((many * weight) / (100 + water) * 100).toFixed(0) + 'g';
  document.getElementById('Water').innerHTML = 'Water: ' + ((many * weight) / (100 + water) * (water - oil)).toFixed(0) + 'g';
  document.getElementById('Salt').innerHTML = 'Salt: ' + (((many * weight) / (100 + water) * 100) / 100 * salt).toFixed(1) + 'g';
  document.getElementById('Oil').innerHTML = 'Oil: ' + (((many * weight) / (100 + water) * 100) / 100 * oil).toFixed(1) + 'g';
  document.getElementById('Yeast').innerHTML = 'Yeast: ' + (((many * weight) / (100 + water) * 100) / 100 * yeast).toFixed(2) + 'g';
  document.getElementById('more').innerHTML = myText;
}

// 新增代码：DOM全部加载完成后自动执行计算
document.addEventListener('DOMContentLoaded', showMsg);

如果你的JS代码本身就放在HTML内容的末尾，也可以直接在JS最后加一行showMsg()，效果是一样的。

内容的提问来源于stack exchange，提问作者yello