获取HTML标记的内部文本，并使用JavaScript和EJS作为值传递给输入字段。

Question

我正在使用一个网格容器，每个网格项目都有一个映像和一个h3标记，它们封装在一个链接到弹出表单的锚标记中；

<a href="#popup" class="grid-item">
      <div>
        <img
          src="/assets/images/Rainbow.jpeg"
          class="grid-image"
          alt="?Icon"
        />
        <h3 class="wallet-text">Rainbow</h3>
      </div>
    </a>
    <a href="#popup" class="grid-item">
      <div>
        <img
          src="/assets/images/TrustWallet.jpeg"
          class="grid-image"
          alt="?Icon"
        />
        <h3 class="wallet-text">Trust Wallet</h3>
      </div>
    </a>

我试图实现的是，当我单击任何钱包时，将文本的h3标记作为钱包名称字段的输入值传递。这就是弹出表单的样子：

<form action="/link" class="pop-up-form" method="POST">
  <a href="#wallet-box" class="close-btn">&times;</a>

  <!-- single field -->
  <div class="data">
    <label>Wallet ID</label>
    <input type="text" name="wallet_id" required />
  </div>
  <!-- single field -->



  <!-- single field -->
  <div class="data">
    <label>Email</label>
    <input type="email" name="email" required />
  </div>
  <!-- single field -->



  <!-- single field -->
  <div class="data">
    <label>Wallet Name</label>
    <input
      type="text"
      name="wallet_name"
      id="wallet_name"
      value=""
      required
    />
  </div>
  <!-- single field -->
  <button class="btn-box btn-transparent px-5">Link</button>
</form>

Answer 1

• 在单击grid-item时只创建一个EventListener。创建一个wallet变量，保存wallet-text值，然后将其放入wallet_name输入字段：

​

let items = Array.from(document.getElementsByClassName("grid-item"));

items.forEach(item => {
  item.addEventListener("click", function(){
    let wallet = this.getElementsByClassName("wallet-text")[0].innerHTML;
    document.getElementById("wallet_name").value = wallet;
  });
});

<a href="#popup" class="grid-item">
  <div>
    <img src="/assets/images/Rainbow.jpeg" class="grid-image" alt="?Icon" />
    <h3 class="wallet-text">Rainbow</h3>
  </div>
</a>
<a href="#popup" class="grid-item">
  <div>
    <img src="/assets/images/TrustWallet.jpeg" class="grid-image" alt="?Icon" />
    <h3 class="wallet-text">Trust Wallet</h3>
  </div>
</a>

<form action="/link" class="pop-up-form" method="POST">
  <a href="#wallet-box" class="close-btn">&times;</a>
  <!-- single field -->
  <div class="data">
    <label>Wallet ID</label>
    <input type="text" name="wallet_id" required />
  </div>
  <!-- single field -->
  <!-- single field -->
  <div class="data">
    <label>Email</label>
    <input type="email" name="email" required />
  </div>
  <!-- single field -->
  <!-- single field -->
  <div class="data">
    <label>Wallet Name</label>
    <input type="text" name="wallet_name" id="wallet_name" value="" required />
  </div>
  <!-- single field -->
  <button class="btn-box btn-transparent px-5">Link</button>
</form>

​