This language feature is only supported for ECMASCRIPT_2015 mode or better: block-scoped function declaration

Question

I have two banners that needs to be displayed when one of the divs exist on my HTML, I've made this script and it works perfectly. The problem is that I'm using GTM and it gives this error: "This language feature is only supported for ECMASCRIPT_2015 mode or better: block-scoped function declaration." How can I transform my function to a code that GTM accepts it?

    var element = document.getElementById('chamaBannerVB')
var elementZC = document.getElementById('chamaBannerZC')
    if (element !== null) {
        function appendHtmlVB() {
            var divVB = document.getElementById("chamaBannerVB");
            divVB.innerHTML += '<a href="https://vidabalanceada.com.br/facaparte?mktcode=IDSTCS" target="_blank"><img class="bannerEbookVB" src="https://img.selecoesbrasil.com.br/banner_ebook/mobile_banner_ebook_vb_LS_03-2023.png" alt="Banner Mobile" style="width: 100%; max-width: 480px;"></a>';
            var styleSheet = document.createElement("style")
            styleSheet.innerText = styles
            document.querySelector(".bannerEbookVB").appendChild(styleSheet);
        }       
        window.onload = appendHtmlVB;
        var styles = "@media (min-width: 768px) {" + ".bannerEbookVB {" + "content: url(https://img.selecoesbrasil.com.br/banner_ebook/banner_ebook_vb_LS_03-2023.png); max-width: 800px!important;" +"}}"

    } else {
        function appendHtml() {
            var div = document.getElementById("chamaBannerZC");
            div.innerHTML += '<a href="https://zenconecta.com.br/facaparte?mktcode=IZSTCS" target="_blank"><img class="bannerEbook" src="https://img.selecoesbrasil.com.br/banner_ebook/mobile_banner_ebook_zc_LS_03-2023.png" alt="Banner Mobile" style="width: 100%; max-width: 480px;"></a>';
            var styleSheet = document.createElement("style")
            styleSheet.innerText = styles
            document.querySelector(".bannerEbook").appendChild(styleSheet);
        }       
        window.onload = appendHtml;
        var styles = "@media (min-width: 768px) {" + ".bannerEbook {" + "content: url(https://img.selecoesbrasil.com.br/banner_ebook/banner_ebook_zc_LS_03-2023.png); max-width: 800px!important;" +"}}"
    }

<!-- <div id="chamaBannerVB"  style="text-align: center; display: flex; justify-content: center; margin: 16px 0; "></div> -->

<div id="chamaBannerZC"  style="text-align: center; display: flex; justify-content: center; margin: 16px 0; "></div>

Answer 1

Use either global functions (declared in the top scope)

function appendHtmlVB() {
    var divVB = document.getElementById("chamaBannerVB");
    divVB.innerHTML += '<a href="https://vidabalanceada.com.br/facaparte?mktcode=IDSTCS" target="_blank"><img class="bannerEbookVB" src="https://img.selecoesbrasil.com.br/banner_ebook/mobile_banner_ebook_vb_LS_03-2023.png" alt="Banner Mobile" style="width: 100%; max-width: 480px;"></a>';
    var styleSheet = document.createElement("style")
    styleSheet.innerText = styles
    document.querySelector(".bannerEbookVB").appendChild(styleSheet);
}
function appendHtml() {
    var div = document.getElementById("chamaBannerZC");
    div.innerHTML += '<a href="https://zenconecta.com.br/facaparte?mktcode=IZSTCS" target="_blank"><img class="bannerEbook" src="https://img.selecoesbrasil.com.br/banner_ebook/mobile_banner_ebook_zc_LS_03-2023.png" alt="Banner Mobile" style="width: 100%; max-width: 480px;"></a>';
    var styleSheet = document.createElement("style")
    styleSheet.innerText = styles
    document.querySelector(".bannerEbook").appendChild(styleSheet);
}

var element = document.getElementById('chamaBannerVB')
var elementZC = document.getElementById('chamaBannerZC')
if (element !== null) {
    window.onload = appendHtmlVB;
    var styles = "@media (min-width: 768px) {" + ".bannerEbookVB {" + "content: url(https://img.selecoesbrasil.com.br/banner_ebook/banner_ebook_vb_LS_03-2023.png); max-width: 800px!important;" +"}}"

} else {
    window.onload = appendHtml;
    var styles = "@media (min-width: 768px) {" + ".bannerEbook {" + "content: url(https://img.selecoesbrasil.com.br/banner_ebook/banner_ebook_zc_LS_03-2023.png); max-width: 800px!important;" +"}}"
}

or just don't use function declarations at all, directly assigning a function expression to the event handler attribute:

var element = document.getElementById('chamaBannerVB')
var elementZC = document.getElementById('chamaBannerZC')
if (element !== null) {
    window.onload = function appendHtmlVB() {
        var divVB = document.getElementById("chamaBannerVB");
        divVB.innerHTML += '<a href="https://vidabalanceada.com.br/facaparte?mktcode=IDSTCS" target="_blank"><img class="bannerEbookVB" src="https://img.selecoesbrasil.com.br/banner_ebook/mobile_banner_ebook_vb_LS_03-2023.png" alt="Banner Mobile" style="width: 100%; max-width: 480px;"></a>';
        var styleSheet = document.createElement("style")
        styleSheet.innerText = styles
        document.querySelector(".bannerEbookVB").appendChild(styleSheet);
    };
    var styles = "@media (min-width: 768px) {" + ".bannerEbookVB {" + "content: url(https://img.selecoesbrasil.com.br/banner_ebook/banner_ebook_vb_LS_03-2023.png); max-width: 800px!important;" +"}}"

} else {
    window.onload = function appendHtml() {
        var div = document.getElementById("chamaBannerZC");
        div.innerHTML += '<a href="https://zenconecta.com.br/facaparte?mktcode=IZSTCS" target="_blank"><img class="bannerEbook" src="https://img.selecoesbrasil.com.br/banner_ebook/mobile_banner_ebook_zc_LS_03-2023.png" alt="Banner Mobile" style="width: 100%; max-width: 480px;"></a>';
        var styleSheet = document.createElement("style")
        styleSheet.innerText = styles
        document.querySelector(".bannerEbook").appendChild(styleSheet);
    };
    var styles = "@media (min-width: 768px) {" + ".bannerEbook {" + "content: url(https://img.selecoesbrasil.com.br/banner_ebook/banner_ebook_zc_LS_03-2023.png); max-width: 800px!important;" +"}}"
}