Jquery returns 尝试使用 onmousedown 通过其 id 拉取元素时未定义

Question

我有一个 javascript 函数，当我单击它时，它会更改字体标签中元素的文本。我试图通过带有 jquery 的 id 标签获取元素，但是当我 console.log 时 jquery 结果显示为未定义。所有 allWordsList 变量都来自 python flask，我已经确认 javascript 确实正确接收了它问题似乎出在这一行 var wordID = $(el).attr("id"); 因为当我 console.log it

时它 returns 未定义

<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>

<font id="1" size = '10' color = "red" onmousedown= "changeText()"> hello </font>

Answer 1

首先，您的代码使用了已弃用（如 font）、不再需要（如 type=text/javascript）或遗留而非标准（如 onmouseover）的元素和属性).

You should not be using HTML event attributes like onXyz 而不是将 HTML 与 JavaScript 分开，并在 JavaScript 中进行事件绑定。然后，如果事件处理程序是作为与 DOM 元素交互的结果执行的，您可以只使用 this 来引用触发事件的元素。

此外，清除元素的 innerHTML 然后在下一行设置它是没有意义的。只需设置它。但是，真的，你应该 avoid .innerHTML when you can (which is almost always) because it has security and performance implications. And you're not even setting the text to any HTML anyway. Instead, use .textContent.

And, the font tag is deprecated. 您应该使用 CSS 设置文本的大小和颜色，并将文本包装在有效元素中，例如 div 或 span.

最后，虽然以数字开头的 id 在 HTML5 中有效，但 CSS 无法识别那些 id。最好给你的元素一个以字母开头并且有意义的id。如果你需要一个数字与元素相关联，最好使用 data-* attribute.

以下是所有这些建议的汇总：

#item1 { font-size:20px; color:red; }

<div id="item1" data-index="1"> hello </div>

<script>
    let allWordsList  = [ "Jan", "Feb", "Mar", "Apr", "May", "Jun", "Jul" ];

    document.getElementById("item1").addEventListener("mousedown", changeText);

    function changeText(){
       // Set the text to the data-index value of the HTML element:
       this.textContent = allWordsList[this.dataset.index];
    }
</script>

Jquery returns 尝试使用 onmousedown 通过其 id 拉取元素时未定义

Jquery returns undefined when trying to pull an element by its id with onmousedown

javascript

jquery

onmousedown