Bug with custom code

[Itamar_Kamar]

I can’t seem to be getting this one, but when ending the node for the javascript segment in the Timeline page body chrome gives me the following error:

The line of code is:

Can someone help me fix this, please?

Here is a link to the problematic page:
http://david-dor.webflow.io/timeline

Thank you in advance!

Here is my site Read-Only: Webflow - David D'or
(how to share your site Read-Only link)

[cyberdave (Dave S.)]

Hi @Itamar_Kamar, my first guess is that the custom code you are using is targeting collection items and what I think is happening is that the code is running before the whole page is loaded, and an error is encountered when an element that should be there before the script starts, has not yet loaded.

I would first try wrapping the code you are using in the Before body, in a document.ready function in jQuery to only load the code after all elements on the page have loaded.

Take a peek here:

<script>

$( document ).ready(function() {
        var yearlinks = document.getElementsByClassName('year-link');
for (i = 0; i < yearlinks.length; i++) {
		yearlinks[i].innterText = yearlinks[i].innerText.replace('\n','');
    yearlinks[i].setAttribute("onclick", "setYear('" + yearlinks[i].innerText + "')");
}

function setYear(year) {
		year = year.toString().replace('\n','');
    yearTitle = document.getElementById('yearTitle');
    yearTitle.innerText = year;
    setYearItems(year);
    setcolors(year);
}

function setYearItems(year) {
    cmsItems = document.getElementsByClassName('yearitem');
    for (i = 0; i < cmsItems.length; i++) {
        cmsItems[i].parentElement.parentElement.style.display = 'none';
        if (cmsItems[i].innerText.replace(/[^A-Z0-9]/ig, "") == year.toString()) {
            cmsItems[i].parentElement.parentElement.style.display = 'flex';
        }

    }
}

function setcolors(year){
    for (i = 0; i < yearlinks.length; i++) {
        circle = yearlinks[i].getElementsByClassName('timeline-year-circle')[0];
        text = yearlinks[i].getElementsByClassName('yearlink-text')[0];
        circle.style.backgroundColor = '#a2a2a2';
        text.style.color = '#a2a2a2';
        if (year == text.innerHTML.toString().replace(/[^A-Z0-9]/ig, ""))
        {
            circle.style.backgroundColor = '#3b99d9';
            text.style.color = '#3b99d9';
        }
    }
}

setYear(yearlinks[0].innerText);

    });
    

</script>

Replace your current code with the code above then republish. If the error persists I would check your code again as it may be trying to target an element that does not exist or is referenced incorrectly.

I hope this helps

[Itamar_Kamar]

@cyberdave

<script> $( document ).ready(function() { var yearlinks = document.getElementsByClassName(‘year-link’); for (i = 0; i < yearlinks.length; i++) { yearlinks[i].innterText = yearlinks[i].innerText.replace(‘\n’,‘’); yearlinks[i].setAttribute(“onclick”, “setYear('” + yearlinks[i].innerText + “')”); } function setYear(year) { year = year.toString().replace(‘\n’,‘’); yearTitle = document.getElementById(‘yearTitle’); yearTitle.innerText = year; setYearItems(year); setcolors(year); } function setYearItems(year) { cmsItems = document.getElementsByClassName(‘yearitem’); for (i = 0; i < cmsItems.length; i++) { cmsItems[i].parentElement.parentElement.style.display = ‘none’; if (cmsItems[i].innerText.replace(/[^A-Z0-9]/ig, “”) == year.toString()) { cmsItems[i].parentElement.parentElement.style.display = ‘flex’; } } } function setcolors(year){ for (i = 0; i < yearlinks.length; i++) { circle = yearlinks[i].getElementsByClassName(‘timeline-year-circle’)[0]; text = yearlinks[i].getElementsByClassName(‘yearlink-text’)[0]; circle.style.backgroundColor = ‘#a2a2a2’; text.style.color = ‘#a2a2a2’; if (year == text.innerHTML.toString().replace(/[^A-Z0-9]/ig, “”)) { circle.style.backgroundColor = ‘#3b99d9’; text.style.color = ‘#3b99d9’; } } } setYear(yearlinks[0].innerText); }); </script>

It worked! Thank you so much!