我想添加一个按钮的 onclick 功能，在 javascript 中添加几个祝酒词

Question

我有一个表格。我想编写一个 onClick 函数，只要单击该函数，页面末尾就会出现一个包含输入值的吐司。在这里，我编写了一个函数，只需在第一次点击时就生成吐司。

function Function1() {
  var y = document.getElementsByTagName("select")[0].value;
  var z = document.getElementsByTagName("input")[0].value;
  var x = document.getElementById("toast1");

  x.innerHTML = y + " has a " + z + "<span >&times;</span>";
  x.className = "show";
}

<form class="needs-validation" novalidate>
  <h5>Select the owner?</h5>
  <div class="form-group col mx-auto" style="width: 80%;">
    <label for="validationDefault01" class="sr-only">households</label>
    <select
      class="custom-select place-holder form-control form-control-lg OwnerName"
      style="font-size: 15px;"
      id="validationDefault01"
      style="border-radius: 2px;"
      required
    >
      <option value="" selected hidden>Choose...</option>
      <option value="Jack London"> Jack London</option>
      <option value="Sarah London"> Sarah London</option>
      <option value="Mike"> Mike</option>
    </select>
  </div>
  <br />
  <h5>What is the brand?</h5>
  <div class="input-group mx-auto" style="border-radius: 8px; width: 75%;">
    <label for="validationCustom01" class="sr-only">Brand</label>
    <input
      class="form-control brand"
      type="text"
      required
      id="validationCustom01"
      style="font-size: 15px; height: 40px;"
      placeholder="Brand"
    />
    <div class="valid-feedback">correct</div>
  </div>
  <br />
  <h5>What is the model year?</h5>
  <div class="input-group mx-auto" style="border-radius: 8px; width: 75%;">
    <label for="validationCustom01" class="sr-only">yyyy</label>
    <input
      class="form-control"
      type="text"
      required
      id="validationCustom01"
      style="font-size: 15px; height: 40px;"
      onkeypress="return CheckNumeric()"
      placeholder="yyyy"
    />
    <div class="valid-feedback">correct</div>
  </div>
  <br />
  <h5 class="mx-2">How much is worth?</h5>
  <div class="input-group mx-auto" style="border-radius: 8px; width: 75%;">
    <div class="input-group-prepend">
      <div
        class="input-group-text font-weight-bold"
        style="
          font-size: 15px;
          background-color: rgba(50, 157, 105, 1);
          color: white;
        "
      >
        $
      </div>
    </div>
    <label for="validationDefault01" class="sr-only">deposite</label>
    <input
      type="text"
      class="form-control floatNumber"
      id="validationDefault01"
      style="font-size: 15px;"
      onkeypress="return CheckNumeric()"
      onkeyup="FormatCurrency(this)"
      placeholder="example: 10000"
      required
    />
  </div>
  <p id="demo"></p>
  <br />
  <div class="row">
    <div class="col">
      <button
        class="quebtn1 mx-auto"
        style="width: 130px;"
        type="button"
        onclick="Function1()"
      >
        Add Vehicle
      </button>
    </div>
  </div>
  <div class="row">
    <div class="col-6">
      <button class="quebtn1 float-right" type="button">Back</button>
    </div>
    <div class="col-6">
      <button class="quebtn1" type="submit">Next</button>
      <br />
    </div>
    <div class="row pt-0 mx-auto text-center">
      <div
        class="toast-body toast no-gutters"
        data-autohide="false"
        role="alert"
        aria-live="assertive"
        aria-atomic="true"
        id="toast1"
      ></div>
    </div>
  </div>
</form>

但我希望当用户填写表格并单击“添加车辆”按钮时一次又一次地添加另一辆车，每次添加包含前一车辆用户信息的吐司，都会产生。

Answer 1

要了解为什么您没有得到想要的结果，您必须了解 DOM。目前，无论何时单击按钮，您总是在更改相同的 DOM 元素。

var x = document.getElementById("toast1");

x.innerHTML = y + " has a " + z + "<span >&times;</span>";
x.className = "show";

看看您是如何select使用 ID 为 toast1 的元素并每次通过设置其 innerHTML 和 className 来操纵该元素的？

您要做的是创建一个 new 元素，并将该新元素 放在 ID 为 [=] 的元素 下面15=].

要创建新元素，您可以使用 createElement:

var newEl = document.createElement("p");

newEl.innerHTML = y + " has a " + z + "<span >&times;</span>";
newEl.className = "show";

然后插入它使用 appendChild:

x.appendChild(newEl);

完整代码如下：

function Function1() {
  var y = document.getElementsByTagName("select")[0].value;
  var z = document.getElementsByTagName("input")[0].value;
  var x = document.getElementById("toast1");
  var newEl = document.createElement("div");

  newEl.innerHTML = y + " has a " + z + "<span >&times;</span>";
  newEl.className = "show";
  x.appendChild(newEl);
}

<form class="needs-validation" novalidate>
  <h5>Select the owner?</h5>
  <div class="form-group col mx-auto" style="width: 80%;">
    <label for="validationDefault01" class="sr-only">households</label>
    <select
      class="custom-select place-holder form-control form-control-lg OwnerName"
      style="font-size: 15px;"
      id="validationDefault01"
      style="border-radius: 2px;"
      required
    >
      <option value="" selected hidden>Choose...</option>
      <option value="Jack London"> Jack London</option>
      <option value="Sarah London"> Sarah London</option>
      <option value="Mike"> Mike</option>
    </select>
  </div>
  <br />
  <h5>What is the brand?</h5>
  <div class="input-group mx-auto" style="border-radius: 8px; width: 75%;">
    <label for="validationCustom01" class="sr-only">Brand</label>
    <input
      class="form-control brand"
      type="text"
      required
      id="validationCustom01"
      style="font-size: 15px; height: 40px;"
      placeholder="Brand"
    />
    <div class="valid-feedback">correct</div>
  </div>
  <br />
  <h5>What is the model year?</h5>
  <div class="input-group mx-auto" style="border-radius: 8px; width: 75%;">
    <label for="validationCustom01" class="sr-only">yyyy</label>
    <input
      class="form-control"
      type="text"
      required
      id="validationCustom01"
      style="font-size: 15px; height: 40px;"
      onkeypress="return CheckNumeric()"
      placeholder="yyyy"
    />
    <div class="valid-feedback">correct</div>
  </div>
  <br />
  <h5 class="mx-2">How much is worth?</h5>
  <div class="input-group mx-auto" style="border-radius: 8px; width: 75%;">
    <div class="input-group-prepend">
      <div
        class="input-group-text font-weight-bold"
        style="
          font-size: 15px;
          background-color: rgba(50, 157, 105, 1);
          color: white;
        "
      >
        $
      </div>
    </div>
    <label for="validationDefault01" class="sr-only">deposite</label>
    <input
      type="text"
      class="form-control floatNumber"
      id="validationDefault01"
      style="font-size: 15px;"
      onkeypress="return CheckNumeric()"
      onkeyup="FormatCurrency(this)"
      placeholder="example: 10000"
      required
    />
  </div>
  <p id="demo"></p>
  <br />
  <div class="row">
    <div class="col">
      <button
        class="quebtn1 mx-auto"
        style="width: 130px;"
        type="button"
        onclick="Function1()"
      >
        Add Vehicle
      </button>
    </div>
  </div>
  <div class="row">
    <div class="col-6">
      <button class="quebtn1 float-right" type="button">Back</button>
    </div>
    <div class="col-6">
      <button class="quebtn1" type="submit">Next</button>
      <br />
    </div>
    <div class="row pt-0 mx-auto text-center">
      <div
        class="toast-body toast no-gutters"
        data-autohide="false"
        role="alert"
        aria-live="assertive"
        aria-atomic="true"
        id="toast1"
      ></div>
    </div>
  </div>
</form>

此外，这里有一些与您的问题没有直接关系的提示：

还有 querySelector 而不是像 getElementsByTagName 这样的东西。它让您基本上可以使用 CSS select 或 select 元素，很多人觉得这些元素易于使用。
对于这种 DOM 操作，您可能还想尝试使用 jQuery 库
了解 DOM 操作如何用于教育目的很好，但在实际项目中，该领域已转向 UI 库，如 React 和 Vue。
您将函数命名为 Function1。这行得通，但如果您可以将其命名为更具描述性的名称，例如 addVehicle，则效果会更好。这样就更清楚它在做什么。使用一个函数 Function1 可能没问题，但想象一下，如果您有 12 个函数并且必须自己思考，“等等，Function3 又在做什么？我想使用 Function7 吗？ “
边做边学很好，但将其与更“自下而上”的阅读书籍和内容的方法相结合也很好，可以为您提供开展此类有趣项目所需的基础。

我想添加一个按钮的 onclick 功能，在 javascript 中添加几个祝酒词

I want to add an button onclick function, to add several toasts in javascript

javascript

buttonclick

toast