twig foreach中的JavaScript函数

我有这个密码，上面有不同海报的电话号码

{% for ad in ads %}
...
    <a class="btn"  onclick="showNumber()" id="showNumber"><span class="fa fa-phone"></span> View Phone Number</a>

    <input id="phonenum" style="display: none;" type="text" value="{{ ad.user.phone }}">
...
{% endfor %}

{%用于ads%中的ad}
...
查看电话号码
...
{%endfor%}

还有Javascript函数

<script type="text/javascript">
  function showNumber() {
  document.getElementById('showNumber').innerHTML = document.getElementById('phonenum').value;
}
</script>

函数showNumber（）{
document.getElementById（'showNumber'）。innerHTML=document.getElementById（'phonenum'）。值；
}

---

当我将其更改为block时，上述功能和输入字段正确显示海报的不同编号。但问题是，无论我点击哪个按钮，第一个按钮上第一个按钮的电话号码都会显示出来。我还应该在那里做什么

ID意味着是唯一的，您在循环中创建元素并为它们提供相同的ID（

phonenum

），而不是ID，您应该使用类名并检索单击锚定的相应元素基础。以下是一个例子：

{% for ad in ads %}
...
    <a class="btn" onclick="showNumber(e)"><span class="fa fa-phone"></span> View Phone Number</a>

    <input class="phonenum" style="display: none;" type="text" value="{{ ad.user.phone }}">
...
{% endfor %}

<script type="text/javascript">
  function showNumber(e) {
    e.target.innerHTML = e.target.parent.querySelector('.phonenum').value;
  }
</script>

{%用于ads%中的ad}
...
查看电话号码
...
{%endfor%}
函数showNumber（e）{
e、 target.innerHTML=e.target.parent.querySelector（'.phonenum'）.value；
}

---

在本例中，

e.target

是单击的锚，我使用

e.target.parent.querySelector（'.phonenum'）

检索与锚关联的输入（我假设它们具有相同的父元素）。

每个按钮和输入将获得相同的

id

，因此将导致无效的HTML。也不要在js中使用

onclick

属性，而是使用

.addEventListener

。使用类名来获取正确的元素，而不是IDS。我尝试了它，但在控制台中遇到了此错误

uncaughtreferenceerror:e未定义