js onclick方法在火狐中不起作用

Question

定义了一个 onclick，在 Edge 和 chrome 中都起作用，但是火狐就 gg 了，刚自学网页前端，还望各位指教一下，多谢！

<div class="sidebar-btn">

    <button>

        <span class="sidebar-btn-icon" onclick="sidebarOpen();">

            <svg height="24" viewBox="0 0 24 24" width="24" xmlns="http://www.w3.org/2000/svg">

                <path d="M10 18h4v-2h-4v2zM3 6v2h18V6H3zm3 7h12v-2H6v2z"></path>

                <path d="M0 0h24v24H0z" fill="none"></path>

            </svg>

        </span>

    </button>

</div>

function sidebarOpen() {

    if (main.hasClass('sidebar-open')) {

        main.removeClass('sidebar-open');

    } else {

        main.addClass('sidebar-open');

    }

}

// main 是我定义的变量名，具体在下面的截图里面，我尝试过不用变量了

让我纳闷的是另外一个函数在火狐里就起作用，就上面这个不行，下面是起作用的那个：

<div class="header-search-btn">

    <i class="fas fa-search search-open" onclick="searchToggle();"></i>

    <i class="fas fa-times search-close" onclick="searchToggle();"></i>

</div>

function searchToggle() {

    if(main.hasClass('search-open')) {

        main.removeClass('search-open');

        $(".search-input").val("");

        $("#local-search-result").empty();

    } else {

        main.addClass('search-open');

        $(".search-input").val("");

        $("#local-search-result").empty();

        scrollTo(0,0);

    }

}

原来方法名字为 sidebarToggle()，我还以为是方法名原因，然后改过来了，我也试过直接把 js 放到元素后面，还是不起作用，因为自己都是独自琢磨过来的，所以写的不是那么的规范。希望各位前辈能指点我一下。