如何用JavaScript实现表单传值、对象属性更新及结果展示？

嘿，我来帮你搞定这个问题！其实核心逻辑很简单：用用户的输入更新咱们的car对象，再把对象的最新状态渲染到你已经创建的div里。我给你拆解成具体步骤，附完整代码，你一看就懂～

咱们需要一个输入表单（让用户修改属性），再加一个专门用来展示car信息的div。比如这样：

<!-- 输入表单 -->
<form id="carForm">
  <div>
    <label for="brand">品牌:</label>
    <input type="text" id="brand" placeholder="比如Porsche">
  </div>
  <div>
    <label for="model">车型:</label>
    <input type="text" id="model" placeholder="比如GT3">
  </div>
  <div>
    <label for="year">年份:</label>
    <input type="number" id="year" placeholder="比如2004">
  </div>
  <div>
    <label for="colour">颜色:</label>
    <input type="text" id="colour" placeholder="比如White">
  </div>
  <button type="submit">更新车辆信息</button>
</form>

<!-- 用来展示更新后信息的div -->
<div id="carDisplay">
  <!-- 这里会动态渲染car的属性 -->
</div>

咱们分三步来：

1. 定义初始的car对象
2. 编写一个渲染函数，把car的信息展示到div里
3. 监听表单提交事件，用用户输入更新car对象，再重新渲染

完整代码如下，每一步都加了注释：

// 1. 初始的car对象
let car = {
  brand: "Porsche",
  model: "GT3",
  year: 2004,
  colour: "White"
};

// 2. 获取页面元素：表单和展示div
const carForm = document.getElementById('carForm');
const carDisplay = document.getElementById('carDisplay');

// 3. 渲染函数：把car的最新状态展示到div里
function renderCarInfo() {
  // 用模板字符串拼接内容，这样更直观
  carDisplay.innerHTML = `
    <h3>当前车辆信息</h3>
    <p>品牌: ${car.brand}</p>
    <p>车型: ${car.model}</p>
    <p>年份: ${car.year}</p>
    <p>颜色: ${car.colour}</p>
  `;
}

// 页面加载时先渲染一次初始信息
renderCarInfo();

// 4. 监听表单提交事件
carForm.addEventListener('submit', function(e) {
  // 阻止表单默认的刷新页面行为，这很重要！
  e.preventDefault();

  // 获取用户输入的每个值
  const inputBrand = document.getElementById('brand').value;
  const inputModel = document.getElementById('model').value;
  const inputYear = document.getElementById('year').value;
  const inputColour = document.getElementById('colour').value;

  // 更新car对象：如果用户输入了内容，就替换原属性；没输入的话保留原来的值
  if (inputBrand) car.brand = inputBrand;
  if (inputModel) car.model = inputModel;
  // 年份是数字类型，要转一下
  if (inputYear) car.year = parseInt(inputYear);
  if (inputColour) car.colour = inputColour;

  // 重新渲染最新的车辆信息
  renderCarInfo();

  // 可选：清空表单输入框，提升体验
  carForm.reset();
});

• 为什么要用e.preventDefault()？因为表单默认提交会刷新页面，咱们要的是无刷新更新内容，所以必须阻止这个默认行为。
• 渲染函数的作用：把数据和页面展示解耦，每次数据变了，只需要调用这个函数就能更新页面，不用重复写DOM操作的代码。
• 你提到的“传递输入到另一个表单/展示区域”：其实car对象就是中间的“数据仓库”，输入表单修改它，展示区域读取它的最新状态——相当于两者共享这个对象，就能实现数据同步啦。

你可以直接把这段代码复制到HTML文件里运行试试，比如输入Black更新颜色，输入Cayenne更新车型，提交后就能看到展示区的内容跟着变了～

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