点击复选框同步收货与账单地址的JavaScript功能失效求助

嘿，我一眼就看出问题所在啦！你的JavaScript逻辑思路是对的，但犯了一个很常见的小错误——你只是修改了局部变量的值，却没有把这些值同步回页面上的输入框元素。

问题分析 #

你原来的代码里：

var BN=document.getElementById('billingName').value;
// ...
BN=SN;

这里的BN只是一个存储了输入框当前值的变量，修改它并不会影响到页面上的<input id="billingName">元素本身。相当于你把输入框的内容抄到了一张便签上，然后修改了便签的内容，但输入框里的文字根本没动～

修正后的代码 #

直接操作输入框元素的value属性就能解决问题，下面是修正后的完整函数：

function billingFunction(){
  // 获取页面上的输入框和复选框元素
  const shippingNameEl = document.getElementById('shippingName');
  const shippingZipEl = document.getElementById('shippingZip');
  const billingNameEl = document.getElementById('billingName');
  const billingZipEl = document.getElementById('billingZip');
  const sameCheckbox = document.getElementById('same');

  if (sameCheckbox.checked) {
    // 复制收货地址的值到账单地址输入框
    billingNameEl.value = shippingNameEl.value;
    billingZipEl.value = shippingZipEl.value;
  } else {
    // 清空账单地址输入框
    billingNameEl.value = "";
    billingZipEl.value = "";
  }
}

为什么这样能生效？ #

我们直接获取到输入框的DOM元素，然后修改它的.value属性——这个属性直接和页面上输入框显示的内容绑定，修改它之后页面会立刻同步更新，这才是真正把值“复制”到了账单地址输入框里。

另外还有两个小建议：

• 用const代替var来声明变量（现代浏览器都支持），代码更规范，也能避免意外的变量提升问题
• 给变量起有意义的名字（比如shippingNameEl表示元素），可读性会更好

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