使用 JavaScript 和 EJS 获取 HTML 标记的内部文本并作为值传递给输入字段
Posted
技术标签:
【中文标题】使用 JavaScript 和 EJS 获取 HTML 标记的内部文本并作为值传递给输入字段【英文标题】:Get the inner text of an HTML tag and pass as value to an input field using JavaScript and EJS 【发布时间】:2021-09-26 16:45:33 【问题描述】:我正在使用一个网格容器,每个网格项都有一个 图像和一个 h3 标记,这些标记包裹在一个链接到弹出表单的锚标记中;
<a href="#popup" class="grid-item">
<div>
<img
src="/assets/images/Rainbow.jpeg"
class="grid-image"
/>
<h3 class="wallet-text">Rainbow</h3>
</div>
</a>
<a href="#popup" class="grid-item">
<div>
<img
src="/assets/images/TrustWallet.jpeg"
class="grid-image"
/>
<h3 class="wallet-text">Trust Wallet</h3>
</div>
</a>
我想要实现的是,当我点击任何钱包时,将 h3 标签的 text 作为 wallet Name Field 的输入值传递。 弹出式表单如下所示:
<form action="/link" class="pop-up-form" method="POST">
<a href="#wallet-box" class="close-btn">×</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>
【问题讨论】:
> "当我点击任何钱包时,将 h3 标签的文本作为钱包名称字段的输入值传递。"你的意思是当有人点击grid-item
?
是的,当任何人单击网格项时,该网格项的 文本应作为值传递到 wallet_name 字段
【参考方案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" />
<h3 class="wallet-text">Rainbow</h3>
</div>
</a>
<a href="#popup" class="grid-item">
<div>
<img src="/assets/images/TrustWallet.jpeg" class="grid-image" />
<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">×</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>
【讨论】:
非常感谢 Alexandro Palacios,这行得通以上是关于使用 JavaScript 和 EJS 获取 HTML 标记的内部文本并作为值传递给输入字段的主要内容,如果未能解决你的问题,请参考以下文章
Node JS+Express:如何在 HTML(EJS) 中定义和使用 MySQL 数据?