将jQuery点击事件代码转为原生JS后失效，求原因及解决方法

咱们一步步拆解你代码里的问题，很快就能搞定：

问题1：事件绑定方式错误 #

在原生JS里，不能像jQuery那样直接用.click(function(){})来绑定点击事件，得用addEventListener方法才行。你原来的写法：

document.getElementById("prime").click(function() {
  myFuction();
});

这完全不符合原生JS的API规范，浏览器根本识别不了这种写法。

问题2：DOM方法拼写错误 + 返回值处理不当 #

你写的document.getElementByClassName是错的，正确的方法名是document.getElementsByClassName（注意是Elements复数形式）。而且这个方法返回的是一个包含所有匹配元素的HTMLCollection，不是单个元素，直接调用.classList会报错，得遍历这个集合或者指定具体的索引（比如[0]，如果你只有一个.prime元素的话）。

问题3：函数名拼写不一致 #

你绑定事件时调用的是myFuction()，但定义的函数是myFunction()——少了一个字母n，这会导致调用时找不到函数，直接抛出引用错误。

修复后的完整代码 #

这里是修正后的原生JS代码，完全对应你原来的jQuery逻辑：

document.addEventListener('DOMContentLoaded', function() {
    // 正确绑定点击事件
    document.getElementById("prime").addEventListener('click', function() {
        myFunction();
    });
    
    function myFunction() {
        // 获取所有.prime元素并遍历处理
        const primeElements = document.getElementsByClassName("prime");
        for (let elem of primeElements) {
            elem.classList.toggle("fa-message");
            elem.classList.toggle("fa-xmark");
        }
        // 如果确定只有一个.prime元素，也可以简化成：
        // document.querySelector(".prime").classList.toggle("fa-message");
        // document.querySelector(".prime").classList.toggle("fa-xmark");
    }
});

另外补充个小技巧：用querySelector或者querySelectorAll会更灵活，语法和jQuery的选择器类似，比如document.querySelectorAll(".prime")就能获取所有匹配的元素，用起来更顺手。

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