Streaming live at 10am (PST)

Bug with custom code


#1

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:

image

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: https://preview.webflow.com/preview/david-dor?preview=21045df93b4b9d534260a418cb68662b
(how to share your site Read-Only link)


#2

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


#3

It worked! Thank you so much!


#4

This topic was automatically closed 60 days after the last reply. New replies are no longer allowed.