我需要帮助将 jquery 转换为正常 javascript

Question

i have a chat extension for phpBB forum software. over roughly the last 2 years, i've developed some memory and learning problems. i have a little jquery mixed with my js and part of the jquery code doesn't execute in firefox as if it simply doesn't exist to toggle the display of the bbcode, smilies, and a font colour hold option. no errors or anything come up in the browser console but works perfectly in chrome, edge, and other browsers. what i need converted to normal js is this

$(window).on('load', function () {
    $("#smilies").click(function () {
        $("#chat_smilies").toggle(600);
    });
    $("#bbcodes").click(function () {
        $("#chat_bbcodes").toggle(600);
    });
    $("#chat_bbpalette").click(function () {
        $("#chat_colour_palette").toggle(600);
    });
});

what the above does is a slide effect instead of just popping up the respective elements. i know the element ids are all where they should be to match with the jquery as it works fine with other browsers. is this just a bug with firefox or what? but if someone could help, it would be greatly appreciated.

Answer 1

 const $ = document.querySelector.bind(document); function toggle(duration) { const { style } = this; const { opacity } = style; this.style.transition = `opacity ${duration / 1_000}s`; this.style.opacity = opacity == '' || opacity == 1? 0: 1; } window.onload = () => { $('#smilies').addEventListener('click', toggle.bind($('#chat_smilies'), 600)); $('#bbcodes').addEventListener('click', toggle.bind($('#chat_bbcodes'), 600)); $('#chat_bbpalette').addEventListener('click', toggle.bind($('#chat_colour_palette'), 600)); }

 <button id="smilies">smilies</button> <p id="chat_smilies">chat_smilies</p> <button id="bbcodes">bbcodes</button> <p id="chat_bbcodes">chat_bbcodes</p> <button id="chat_bbpalette">chat_bbpalette</button> <p id="chat_colour_palette">chat_colour_palette</p>

Answer 2

after reading the replies and a ton of reading, i finally found where the issue was. and it was stupidly simply. the code i have posted is fixed completely by replacing it with the following

        $("#smilies").click(function(event) {
            $("#chat_smilies").toggle(600);
        });
        $("#bbcodes").click(function(event) {
            $("#chat_bbcodes").toggle(600);
        });
        $("#chat_bbpalette").click(function(event) {
            $("#chat_colour_palette").toggle(600);
        });

and removing the initial function entirely

$(window).on('load', function () {
   button code here
});

found the main issue from this post Jquery toggle not working in Firefox

thank you all:)