如何实现JavaScript按钮onClick每次点击新增含表单输入值的Toast

架构老林

2026-11-2

核心问题定位

现有实现存在两个关键缺陷，直接导致无法连续生成多条Toast：

每次点击都操作同一个id为toast1的DOM节点，通过innerHTML直接覆盖原有内容，根本没有新增节点的逻辑，自然只会保留最后一次点击的内容
取表单值的逻辑过于脆弱：通过getElementsByTagName按索引取元素，不仅拿不到全量的车辆信息（只取了第一个select和第一个input的值，完全忽略了年份、估值的输入），还很容易因为DOM结构变动取到错误的值。

实现方案

单独设置一个Toast列表容器，用来承接所有新增的Toast条目，不再复用单个固定的空div
每次点击Add Vehicle按钮时，精准读取当前表单的所有输入值，动态创建一个独立的新Toast节点，填充本次录入的车辆数据
把新生成的Toast节点追加到列表容器末尾，完全不改动原有已经生成的Toast内容
给每个独立Toast加上可交互的关闭按钮，支持用户自主删除单条条目

替换后的代码

首先调整HTML结构，把原来单个空的Toast div替换为专门的列表容器：

<!-- 替换原页面中id为toast1的空div，作为所有Toast的承载容器 -->
<div id="toastListContainer" class="pt-0 mx-auto text-center" style="margin-top: 24px;"></div>

然后替换原有Function1的逻辑：

function Function1() {
  // 精准获取所有表单输入值
  const owner = document.querySelector(".OwnerName").value;
  const brand = document.querySelector("input.brand").value;
  const modelYear = document.querySelectorAll("input.form-control")[1].value;
  const worth = document.querySelector("input.floatNumber").value;

  // 基础非空校验，避免空值生成无效Toast
  if (!owner || !brand || !modelYear || !worth) {
    alert("请完整填写所有表单信息再添加");
    return;
  }

  // 动态创建独立的新Toast节点
  const newToast = document.createElement("div");
  newToast.className = "toast show mb-2 p-2";
  newToast.setAttribute("role", "alert");
  newToast.setAttribute("aria-live", "assertive");
  newToast.setAttribute("aria-atomic", "true");
  // 填充本次录入的车辆信息与关闭按钮
  newToast.innerHTML = `
    <span>已添加车辆：车主 ${owner} | 品牌 ${brand} | ${modelYear}年 | 估值 $${worth}</span>
    <span style="cursor: pointer; margin-left: 12px;" onclick="this.parentElement.remove()">&times;</span>
  `;

  // 将新Toast追加到容器末尾，不覆盖原有条目
  document.getElementById("toastListContainer").appendChild(newToast);

  // 录入完成后清空表单输入，方便下一次添加
  document.querySelector(".OwnerName").value = "";
  document.querySelector("input.brand").value = "";
  document.querySelectorAll("input.form-control")[1].value = "";
  document.querySelector("input.floatNumber").value = "";
}

注意事项

动态创建节点的方式完全规避了单节点内容被覆盖的问题，每一次点击都会生成独立的DOM元素，支持任意次数连续添加
表单值的获取逻辑全部通过类名匹配，不会因为后续DOM结构调整出现取错值的问题
不需要额外修改原有Toast的CSS类逻辑，只要保留原有.show类的显示样式，新生成的Toast就会正常展示

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