如何使用JavaScript完成算术运算后修改HTML内容？

问题根源 #

你当前代码的核心错误是：在changehtml()函数里试图从<p>标签（selected_option和regionSelect）读取value属性，但<p>元素根本没有value属性——这些<p>只是用来展示文本的，真正的数值存在于两个下拉选择框（<select>）的选中项里。

修正后的完整代码 #

HTML #

<h3>Select an item</h3>
<!-- 给下拉框加唯一id，换onchange事件 -->
<select id="itemSelect" name="Package" onchange="total(this)">
    <option value="" disabled selected>Select an item</option>
    <option value="20.00">Lavender Oil</option>
    <option value="24.00">Eucalyptus Oil</option>
    <option value="23.00">Peppermint Oil</option>
    <option value="19.00">Jasmine Oil</option>
</select>
<p id="selected_option" class="margin"></p>

<h4 class="margin">Select a region</h4>
<!-- 给下拉框加唯一id，换onchange事件，修正重复的name属性 -->
<select id="regionSelect" class="margin" name="Region" onchange="total2(this)">
    <option value="" disabled selected>Select a region</option>
    <option value="11.20">West Coast</option>
    <option value="17.00">East Coast</option>
</select>
<p id="shipping_fee" class="margin"></p>

<h4 class="margin">Calculate the total cost</h4>
<button class="margin" type="button" onclick="changehtml()">Calculate</button>
<p id="output" class="margin"></p>

JavaScript #

// 更新商品费用显示
function total(ele) {
    document.getElementById("selected_option").innerText = "该商品费用为$" + ele.value + ".";
}

// 更新运费显示
function total2(ele) {
    document.getElementById("shipping_fee").innerText = "运费为$" + ele.value + ".";
}

// 计算总费用
function changehtml() {
    // 直接从下拉框获取选中值
    const itemPrice = document.getElementById("itemSelect").value;
    const shippingPrice = document.getElementById("regionSelect").value;

    // 校验是否已选择商品和地区
    if (!itemPrice || !shippingPrice) {
        document.getElementById("output").innerText = "请先选择商品和地区！";
        return;
    }

    // 转成数字后相加，保留两位小数
    const totalCost = parseFloat(itemPrice) + parseFloat(shippingPrice);
    const formattedTotal = totalCost.toFixed(2);

    document.getElementById("output").innerText = "总费用为$" + formattedTotal;
}

关键修改点 #

• 获取正确的数值来源：直接从两个<select>元素的value读取选中值，而非从展示文本的<p>标签读取
• 优化事件触发：把下拉框的onclick换成onchange，只有当选中项变化时才触发更新，更符合用户交互逻辑
• 增加校验逻辑：处理用户未选择商品/地区的情况，避免计算NaN
• 格式化金额：用toFixed(2)确保总费用显示两位小数，符合货币格式规范
• 修正命名冲突：把第二个下拉框的name从Package改成Region，避免命名混乱

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