如何使用JavaScript函数在调用位置插入计算结果文本？

核心思路是利用document.currentScript获取当前执行的<script>标签，直接替换它来展示计算结果，完全不用手动传递元素ID。

完整代码示例 #

JavaScript 部分

function Walking(distance, ascent, descent) {
  // 示例徒步时间计算逻辑：平路每公里15分钟，爬升每100米10分钟，下降每100米5分钟
  const flatTime = (distance / 1000) * 15;
  const ascentTime = (ascent / 100) * 10;
  const descentTime = (descent / 100) * 5;
  const totalTime = flatTime + ascentTime + descentTime;
  
  // 格式化结果为小时+分钟的可读性文本
  const hours = Math.floor(totalTime / 60);
  const minutes = Math.round(totalTime % 60);
  const resultText = `${hours}小时${minutes}分钟（${distance}米，爬升${ascent}米）`;

  // 获取当前正在执行的script标签
  const currentScript = document.currentScript;
  // 创建文本节点存放计算结果
  const resultNode = document.createTextNode(resultText);
  // 用结果节点替换原script标签
  currentScript.parentNode.replaceChild(resultNode, currentScript);
}

HTML 部分

Walk for
<script>
  Walking(1000, 100, 0);
</script> until you arrive at ... Then walk steeply uphill for
<script>
  Walking(2500, 1100, 0);
</script> to reach the summit.

关键说明 #

• document.currentScript：这个API能精准定位当前正在执行的<script>元素，完美解决“找到调用位置”的核心问题。
• 替换逻辑：通过parentNode.replaceChild直接把原script标签替换成结果文本（如果需要加样式，也可以换成<span>等元素）。
• 计算逻辑可按需调整：示例里的时间算法是户外徒步常用的估算方式，你可以改成符合自己需求的公式。

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