如何使用click函数获取div中元素的详细信息
如何使用click函数获取div中元素的详细信息
提问于 2019-07-07 07:26:31
我有四个div，每个div都包含一个标题、图像和按钮。如何才能让单击该按钮仅选择它所在的div的详细信息。我计划为所有四个div只使用一个函数，因为我将在页面上创建更多的div。
我已经创建了div，并且所有的div都共享相同的ids。每个div都有自己的标题、图片和按钮。在创建函数并使用onclick事件侦听器之后，即使我单击第二个、第三个或第四个div，该函数也总是返回第一个div的值。
我是JS的新手，但我不怕成长和掌握它。我需要你的帮助。谢谢
const forms = document.querySelectorAll("button[type=submit]");
for (const form of forms) {
form.addEventListener('click', function(event) {
let productName = document.getElementById('productName').innerText;
let productImg = document.getElementById('productImg').src;
let package = document.getElementById('package').value;
alert('Working See Details Below:' + '\n' + productName + '\n\n' + productImg + '\n\n' + package);
})
}form {
width: 25%;
height: inherit;
overflow: auto;
float: left;
}<body>
<form id="form">
<h1 id="productName">Div 1</h1>
<img src="img\red.jpg" alt="Trial Image" width="10%" height="100%" class="images" id="productImg"><br>
<select name="category" id="package">
<option value="Business Plan">Business Plan</option>
<option value="Feasibility Report">Feasibility Report</option>
</select>
<button type="submit">Try it</button>
</form>
<form id="form">
<h1 id="productName">Div 2</h1>
<img src="img\yellow.jpg" alt="Trial Image" width="10%" height="100%" class="images" id="productImg"><br>
<select name="category" id="package">
<option value="Business Plan">Business Plan</option>
<option value="Feasibility Report">Feasibility Report</option>
</select>
<button type="submit">Try it</button>
</form>
<form id="form">
<h1 id="productName">Div 3</h1>
<img src="img\blue.jpg" alt="Trial Image" width="10%" height="100%" class="images" id="productImg"><br>
<select name="category" id="package">
<option value="Business Plan">Business Plan</option>
<option value="Feasibility Report">Feasibility Report</option>
</select>
<button type="submit">Try it</button>
</form>
<form id="form">
<h1 class="productName">Div 4</h1>
<img src="img\black.jpg" alt="Trial Image" width="10%" height="100%" class="images" id="productImg"><br>
<select name="category" id="package">
<option value="Business Plan">Business Plan</option>
<option value="Feasibility Report">Feasibility Report</option>
</select>
<button type="submit">Try it</button>
</form>
如前所述，我的期望是让div的按钮返回标题、图像源和用户输入的详细信息，将选择选项移动到localStorage，然后我可以在应用程序的其他页面上使用它。
回答 1
Stack Overflow用户
发布于 2019-07-07 07:33:21
页面的ID must be unique。我建议使用类来代替。
这包括用于"productName“、"productImg”、"package“和"form”的类。
我还建议将“提交”处理程序绑定到表单，而不是将“单击”处理程序绑定到按钮。这允许您使用this keyword在提交的表单中选择类。
下面，我使用了preventDefault()来阻止默认的"submit“操作。
下面是一个演示：
const forms = document.querySelectorAll(".form");
for (const form of forms) {
form.addEventListener('submit', function(event) {
event.preventDefault();
let productName = this.querySelector('.productName').innerText;
let productImg = this.querySelector('.productImg').src;
let package = this.querySelector('.package').value;
alert('Working See Details Below:' + '\n' + productName + '\n\n' + productImg + '\n\n' + package);
});
}.form {
width: 25%;
height: inherit;
overflow: auto;
float: left;
}<form class="form">
<h1 class="productName">Div 1</h1>
<img src="img\red.jpg" alt="Trial Image" width="10%" height="100%" class="images productImg"><br>
<select name="category" class="package">
<option value="Business Plan">Business Plan</option>
<option value="Feasibility Report">Feasibility Report</option>
</select>
<button type="submit">Try it</button>
</form>
<form class="form">
<h1 class="productName">Div 2</h1>
<img src="img\yellow.jpg" alt="Trial Image" width="10%" height="100%" class="images productImg"><br>
<select name="category" class="package">
<option value="Business Plan">Business Plan</option>
<option value="Feasibility Report">Feasibility Report</option>
</select>
<button type="submit">Try it</button>
</form>
<form class="form">
<h1 class="productName">Div 3</h1>
<img src="img\blue.jpg" alt="Trial Image" width="10%" height="100%" class="images productImg"><br>
<select name="category" class="package">
<option value="Business Plan">Business Plan</option>
<option value="Feasibility Report">Feasibility Report</option>
</select>
<button type="submit">Try it</button>
</form>
<form class="form">
<h1 class="productName">Div 4</h1>
<img src="img\black.jpg" alt="Trial Image" width="10%" height="100%" class="images productImg"><br>
<select name="category" class="package">
<option value="Business Plan">Business Plan</option>
<option value="Feasibility Report">Feasibility Report</option>
</select>
<button type="submit">Try it</button>
</form>
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/56918312
复制相关文章
相似问题
腾讯云开发者
Copyright © 2013 - 2026 Tencent Cloud. All Rights Reserved. 腾讯云 版权所有
深圳市腾讯计算机系统有限公司 ICP备案/许可证号：粤B2-20090059 
粤公网安备44030502008569号
腾讯云计算（北京）有限责任公司 京ICP证150476号 | 京ICP备11018762号