Javascript 当使用onmousedown尝试按元素的id提取元素时，Jquery返回undefined

我有一个javascript函数，当我单击它时，它将更改字体标记中元素的文本。我试图使用jquery通过其id标记获取元素，但当我将jquery结果记录到console.log中时，它显示为未定义。 allWordsList变量来自PythonFlask，我已经确认javascript确实正确地接收了它 问题似乎出在这一行

var wordID=$（el.attr（“id”）因为当i console.log时它返回未定义

<script type="text/javascript">

    function changeText(el){
        var allWordsList = JSON.parse({{listFontsJ|tojson|safe}});
        console.log(allWordsList);
        var wordID = $(el).attr("id");
        console.log(wordID);
        var display = document.getElementById(wordID);
        display.innerHTML = '';
        display.innerHTML = allWordsList[wordID]["english"];

    }
  

</script>


函数更改文本（el）{
var allWordsList=JSON.parse（{{listFontsJ|tojson|safe}}）；
console.log（allWordsList）；
var wordID=$（el）.attr（“id”）；
console.log（wordID）；
var display=document.getElementById（wordID）；
display.innerHTML=''；
display.innerHTML=allWordsList[wordID][“english”]；
}

hello
首先，您的代码使用的元素和属性要么已弃用（如
font
），要么已不再需要（如
type=text/javascript
），要么已过时且不标准（如
onmouseover
）

而是将HTML与JavaScript分离，并用JavaScript进行事件绑定。然后，如果事件处理程序是由于与DOM元素交互而执行的，则可以使用
this
引用触发事件的元素

另外，清除元素的
innerHTML
，然后在下一行设置它是没有意义的。就这么定了。但是，实际上，您应该在可以的时候（几乎总是这样），因为它具有安全性和性能影响。而且你甚至没有将文本设置为任何HTML。相反，使用

您应该使用CSS设置文本的大小和颜色，并将文本包装在有效元素中，如
div
或
span

最后，虽然以数字开头的和
id
在HTML5中是有效的，但是CSS不会识别那些
id
s。最好为元素提供一个以字母开头且有意义的
id
。如果需要一个与元素关联的数字，最好使用一个

以下是所有这些建议：


#item1{字体大小：20px；颜色：红色；}
你好
让allWordsList=[“一月”、“二月”、“三月”、“四月”、“五月”、“六月”、“七月”]；
document.getElementById（“item1”）.addEventListener（“mousedown”，changeText）；
函数changeText（）{
//将文本设置为HTML元素的数据索引值：
this.textContent=allWordsList[this.dataset.index]；
}

我尝试了你所说的，但问题肯定出在var wordID=$（el）.attr（“id”）；因为如果我设置var wordID=1，那么works@Mattytripps查看我的更新答案和工作代码。问题是您使用的是内联HTML事件属性，当你应该在JavaScript中进行事件绑定时，你上面给我的解决方案唯一的问题是，我在python中使用for循环生成html，所以我不能使用id=item1，因为我认为我无法在css中生成一堆#item1#item2#item3标记。每个单词都需要不同的颜色，并在同一行上显示，就像它是一个p标签，而不是单个的wordsim将其发送到javascript

。虽然我还没有完全脱离困境。但是由于您的输入，我的代码有了很大的改进。如果有机会的话，你能看看我贴在这里的这个问题吗？供参考：