如何在页面刷新时运行JavaScript数学计算函数？

我来帮你搞定这两个需求——页面刷新时自动运行计算函数更新结果，以及修改数值时同步刷新结果。先梳理下你当前代码里的核心问题，再给你修改后的完整代码：

问题分析 #

1. onload 事件用错了元素：你把onload加在了<a>标签上，但这个元素并不支持onload事件，所以页面加载时完全不会触发计算函数。
2. 页面自动刷新后未重新计算：你的setTimeout会让页面每分钟刷新，但刷新后没有主动调用计算逻辑，导致结果不会自动更新。
3. 缺少初始计算触发：页面首次加载时，没有主动调用计算函数来展示初始结果。

修改后的完整代码 #

<?php require_once("dbcontroller.php"); $db_handle = new DBController(); $sql = "SELECT * from strategy_sheets"; $faq = $db_handle->runQuery($sql); ?> 
<html> 
<head> 
<script src="http://code.jquery.com/jquery-1.10.2.js"></script> 
<script> 
function showEdit(editableObj) { $(editableObj); } 
function saveToDatabase(editableObj,column,id) { 
  $(editableObj); 
  $.ajax({ 
    url: "saveedit.php", 
    type: "POST", 
    data:'column='+column+'&editval='+editableObj.innerHTML+'&id='+id, 
    success: function(data){ 
      $(editableObj); 
    } 
  }); 
} 

// 计算函数，增加异常处理避免NaN或计算错误
function output(){ 
  var value2 = document.getElementById('Tank').textContent; 
  var value3 = document.getElementById('Spritverbrauch').textContent; 
  // 处理空值、非数字的情况，默认设为0
  var tankNum = parseFloat(value2) || 0;
  var spritNum = parseFloat(value3) || 0;
  // 避免除以0的错误，特殊情况返回0.00
  var result = spritNum !== 0 ? (tankNum / spritNum).toFixed(2) : '0.00';
  document.getElementById('StintlangeRd').innerHTML = result; 
} 

// 页面加载完成后自动触发计算
$(document).ready(function() {
  output();
});

// 页面自动刷新后，ready事件会再次触发，所以不用额外处理计算逻辑
</script> 
</head> 
<meta http-equiv="content-type" content="text/html; charset=utf-8"> 
<style>/* 这里可以补充你的自定义样式 */</style> 
<body> 
<table class="tbl-qa"> 
<tr> 
<td >DESCRIPTION:</td> 
<?php foreach($faq as $k=>$v) { ?> 
<td contenteditable="true" id="Event" onBlur="saveToDatabase(this,'event','<?php echo $faq[$k]["id"]; ?>')" onClick="showEdit(this);"><?php echo $faq[$k]["event"]; ?></td> 
<?php } ?> 
</table> 
<hr> 
<table class="tbl-qa"> 
<tr> 
<td>VALUE 1:</td> 
<?php foreach($faq as $k=>$v) { ?> 
<td contenteditable="true" id="Tank" size="2" oninput="output();" onBlur="saveToDatabase(this,'Tank','<?php echo $faq[$k]["id"]; ?>')" onClick="showEdit(this);"><?php echo $faq[$k]["Tank"]; ?></td> 
<?php } ?> 
<td>VALUE 2:</td> 
<?php foreach($faq as $k=>$v) { ?> 
<td contenteditable="true" id="Spritverbrauch" size="2" oninput="output();" onBlur="saveToDatabase(this,'Spritverbrauch','<?php echo $faq[$k]["id"]; ?>')" onClick="showEdit(this);"><?php echo $faq[$k]["Spritverbrauch"]; ?></td> 
<?php } ?> 
</tr> 
<tr> 
<td>RESULT: </td> 
<td><span id="StintlangeRd"></span></td> 
</tr> 
</table> 
<script type="text/javascript"> 
setTimeout(function(){ location.reload(); },60000); 
</script> 
</body> 
</html>

关键修改点说明 #

• 页面加载自动计算：用$(document).ready()替代无效的<a>标签onload，不管是首次加载还是自动刷新后的页面，都会自动触发计算函数。
• 同步更新优化：把所有输入框的oninput统一调用output()（你之前写的output2()和output3()没看到定义，所以暂时去掉了，需要的话可以再加回来），确保修改任何数值时都会立即刷新结果。
• 异常处理：增加了对空值、非数字和除以0的场景处理，避免页面出现NaN或错误提示。
• 元素语义化修正：把结果展示的<a>标签改成了<span>，因为这里只需要展示文本，不需要链接功能，更符合HTML语义规范。

这样修改后，你的两个需求就都能完美实现了：页面刷新时自动计算结果，修改任意数值时结果同步更新。

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