如何在给定JavaScript代码中输出shipping-cost值？新手求助

你的代码核心问题是找不到.text-success元素，导致shippingCost变量为null，尝试给null.textContent赋值时会触发浏览器错误，中断后续代码执行，所以.shipping-cost容器始终无法显示运费。

另外你重复绑定了两次change事件，逻辑冗余，也可以一并优化。

修正后的完整代码 #

<label>
  <select class="form-select" name="shipping" id="country" required>
    <option value="">Choose...</option>
    <option value="DPD">DPD</option>
    <option value="DHL">DHL</option>
    <option value="DHL Express">DHL Express</option>
  </select>
</label>

<div class="result"></div>
<div class="shipping-cost"></div>

<script type="text/javascript">
  const selectElement = document.querySelector('.form-select');
  const resultDisplay = document.querySelector('.result');
  const shippingCostDisplay = document.querySelector('.shipping-cost');

  selectElement.addEventListener('change', (event) => {
    const selectedValue = event.target.value;
    
    // 更新选择结果
    resultDisplay.textContent = `You chose ${selectedValue}`;
    
    // 计算并显示运费
    let shippingCost = '$0';
    switch(selectedValue) {
      case 'DPD':
        shippingCost = '$5';
        break;
      case 'DHL':
        shippingCost = '$10';
        break;
      case 'DHL Express':
        shippingCost = '$15';
        break;
    }
    shippingCostDisplay.textContent = shippingCost;
  });
</script>

主要修改点 #

1. 移除无效元素查询：删掉了const shippingCost = document.querySelector('.text-success');，因为页面中不存在这个类的元素，直接用变量存储运费值再赋值给显示容器。
2. 合并重复事件监听：把两个change事件逻辑合并，避免重复执行相同代码。
3. 修复标签问题：补全了原代码中缺失的开头<label>标签，移除多余的闭合标签。
4. 使用更安全的textContent：替换innerHTML为textContent，这里不需要渲染HTML，textContent更安全且性能更好。

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