从HTML表单获取用户输入并在JavaScript中进行计算与结果展示

<form onsubmit="calculos(); return false;">
  <!-- 表单输入元素 -->
  <input type="submit" value="提交"/>
</form>

function calculos() {
  // 通过ID获取输入框元素，并读取其当前值
  var num1 = document.getElementById("gasto").value;
  // num1 变量现在包含了用户在ID为"gasto"的输入框中输入的值
  // ... 后续可以对 num1 进行计算
}

function calculos() {
  var num1 = document.getElementById("gasto").value;

  // 将获取到的字符串值转换为浮点数进行计算
  // 使用 parseFloat() 或 Number() 进行类型转换，以确保数值计算的准确性
  var valorBase = parseFloat(num1);

  // 对输入值进行有效性检查，防止用户输入非数字或负数
  if (isNaN(valorBase) || valorBase < 0) {
    alert("请输入一个有效的正数金额！");
    return; // 如果输入无效，则停止函数执行
  }

  // 执行计算
  var Honorarios = valorBase * 0.3; // 费用1：30%
  var Escribania = valorBase * 0.2; // 费用2：20%
  var sellos = valorBase * 0.05;    // 费用3：5%

  // ... 后续结果展示
}

console.log("Honorarios:", Honorarios);
console.log("Escribania:", Escribania);
console.log("sellos:", sellos);

// 使用ES6模板字符串（反引号 `` ` ``）组合多行文本和变量
let allOfThem = `计算结果：
Honorarios (30%): ${Honorarios.toFixed(2)}
Escribania (20%): ${Escribania.toFixed(2)}
Sellos (5%): ${sellos.toFixed(2)}`;

alert(allOfThem);

<form onsubmit="calculos(); return false;">
  <label for="gasto">
    <span> Valor </span>
  </label>
  <input
    required
    type="number"
    id="gasto"
    class="gasto"
    name="gasto"
    placeholder="请输入金额..."
  />
  <input type="submit" value="计算"/>
</form>

<script>
  function calculos() {
    var num1 = document.getElementById("gasto").value;

    // 将输入值转换为浮点数，并进行有效性检查
    var valorBase = parseFloat(num1);

    if (isNaN(valorBase) || valorBase < 0) {
      alert("请输入一个有效的正数金额！");
      return; // 如果输入无效，则终止函数执行
    }

    // 执行各项费用计算
    var Honorarios = valorBase * 0.3;
    var Escribania = valorBase * 0.2;
    var sellos = valorBase * 0.05;

    // 调试输出到控制台，便于开发人员查看中间结果
    console.log("原始金额:", valorBase);
    console.log("Honorarios (30%):", Honorarios);
    console.log("Escribania (20%):", Escribania);
    console.log("Sellos (5%):", sellos);

    // 组合所有计算结果为一个易读的字符串，并通过弹窗显示
    // 使用 toFixed(2) 保留两位小数，适用于货币显示
    let allOfThem = `计算结果：
原始金额: ${valorBase.toFixed(2)}
--------------------
Honorarios (30%): ${Honorarios.toFixed(2)}
Escribania (20%): ${Escribania.toFixed(2)}
Sellos (5%): ${sellos.toFixed(2)}`;

    alert(allOfThem);
  }

  // 重要：避免在页面加载时自动调用 calculos() 函数
  // 如果此处存在 calculos();，请务必注释掉或移除，
  // 因为函数应仅在用户提交表单时通过 onsubmit 事件触发。
</script>