如何用JavaScript动态获取点击文本的值？DJANGO项目遇undefined问题

你的代码存在三个核心问题：

1. 重复ID：循环生成的所有<p>标签都用了相同的id="myBtn"，HTML中ID必须唯一，document.getElementById只会返回第一个匹配的元素，无法定位到你点击的那个<p>。
2. 错误的属性获取：<p>标签没有value属性，这是表单元素（如<input>）的专属属性，所以你拿到undefined。
3. 未传递点击元素：点击函数不知道当前触发事件的是哪个元素，无法精准获取对应文本。

解决方案1：直接传递点击元素 #

修改HTML，移除重复ID，点击时把当前元素传给函数：

<div class="askedDiv">
  {% for i in recentlyUsed %}
    <p onclick="myFunction(this)">{{i}}</p>
  {% endfor %}
</div>

修改JS函数，接收元素参数并获取文本内容：

function myFunction(element) {
  // textContent获取纯文本，trim去除前后多余空格
  const clickedText = element.textContent.trim();
  console.log(clickedText);
}

解决方案2：事件委托（更推荐） #

给父元素绑定一次点击事件，通过事件冒泡判断点击的是<p>标签，适合动态生成的元素：

<div class="askedDiv" id="askedDiv">
  {% for i in recentlyUsed %}
    <p>{{i}}</p>
  {% endfor %}
</div>

// 给父元素绑定点击事件
document.getElementById('askedDiv').addEventListener('click', function(e) {
  // 判断点击的目标是<p>标签
  if (e.target.tagName === 'P') {
    const clickedText = e.target.textContent.trim();
    console.log(clickedText);
  }
});

这种方法不需要给每个<p>单独绑定事件，性能更优，也避免了重复ID的问题。

内容的提问来源于stack exchange，提问作者Shubh kumar