如何在HTML页面中运行软水树脂离子交换计算的JavaScript代码

完整可运行演示代码 #

直接复制以下内容保存为.html文件，用浏览器打开即可使用：

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <title>软水树脂交换量计算器</title>
</head>
<body>
    <h3>软水树脂交换量计算</h3>
    <div>
        <label>树脂体积（L）：</label>
        <input type="number" id="resinVolume" value="50">
    </div>
    <div style="margin: 10px 0;">
        <label>进水硬度（ppm）：</label>
        <input type="number" id="hardness" value="200">
    </div>
    <button id="calcBtn">计算产水量</button>
    <div style="margin-top: 15px; font-size: 18px;">
        计算结果：<span id="result"></span>
    </div>

    <script>
        // 原有计算逻辑保留
        const totalCapacity = function (resinVolume, hardness) {
            let exchange = 50;
            return (resinVolume * exchange) / hardness;
        };

        // 触发方式1：页面加载完成后自动计算默认值并展示
        window.onload = function() {
            const defaultResult = totalCapacity(50, 200);
            document.getElementById('result').innerText = defaultResult + ' m³';
        }

        // 触发方式2：绑定按钮点击事件，点击后读取用户输入计算
        document.getElementById('calcBtn').addEventListener('click', function() {
            // 用getElementById获取输入框节点，读取用户输入数值
            const resinVol = Number(document.getElementById('resinVolume').value);
            const hard = Number(document.getElementById('hardness').value);
            const result = totalCapacity(resinVol, hard);
            // 用querySelector匹配结果节点，写入计算值
            document.querySelector('#result').innerText = result + ' m³';
        })
    </script>
</body>
</html>

核心知识点说明 #

• JS触发执行的常见方式：
  • 页面加载自动执行：可绑定window.onload事件，或者把script标签放在body标签末尾，页面渲染完成后脚本会自动运行
  • 用户操作触发：可给按钮、输入框等元素绑定click、input等事件，用户执行对应操作时触发代码运行
• DOM操作API用法：
  • document.getElementById('元素ID')：直接通过元素的id属性匹配对应DOM节点，匹配速度快，是最常用的节点获取方法
  • document.querySelector('CSS选择器')：支持用CSS选择器语法匹配节点，比如按类名、标签层级匹配，适合复杂场景使用
  • 拿到DOM节点后，可通过.value读取输入框内容，通过.innerText/.innerHTML修改元素展示的文本内容

学习建议 #

1. 先跑通上述示例代码，尝试修改参数、调整页面样式观察效果，直观理解DOM操作的作用
2. 尝试扩展功能：比如新增输入校验，判断输入数值不能小于等于0，非法输入时提示用户
3. 逐步迭代：比如拆分更多计算参数，把计算逻辑抽为独立JS文件，通过script标签的src属性引入使用

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