我有一个动态 html 模板。 当我单击一个按钮时，哪个 forms 。 现在，问题是当我单击一个按钮时，所有按钮都被单击

Question

这是我单击按钮时的 html 模板 forms。

<div class="detail">
                    <h3>${element.name}</h3>
                    <p>Phone: ${element.phone}</p>
                    <button onclick="addToHistory()">Call</button>
                </div>`

假设它按原样创建了两个模板。

<div class="detail">
                        <h3>Person1</h3>
                        <p>Phone: 0111111111</p>
                        <button onclick="addToHistory()">Call</button>
                    </div>`

<div class="detail">
                        <h3>Person2</h3>
                        <p>Phone: 0111111111</p>
                        <button onclick="addToHistory()">Call</button>
                    </div>`

现在，我想单击一个按钮，然后根据我的单击，我希望存储单击的 div 的数据。

正如您在 addToHistory() function 中看到的那样，我使用事件处理程序进行了尝试。 但是，它存储了我点击和未点击的所有数据。

请注意：我只想使用 JavaScript 来执行此操作。 谢谢您的支持。

Answer 1

您可以将this传递到您的方法中，并使用它在单击按钮的特定detail容器中进行遍历。

this将引用事件发生的特定元素

 function addToHistory(el){ console.log(el.previousElementSibling.textContent); }

 <div class="detail"> <h3>Person1</h3> <p>Phone: 0999999999</p> <button onclick="addToHistory(this)">Call</button> </div>` <div class="detail"> <h3>Person2</h3> <p>Phone: 0111111111</p> <button onclick="addToHistory(this)">Call</button> </div>`

Answer 2

We can trigger button click by class. 
Please check this example `https://jsfiddle.net/h54dt731/`