[FIXED] Why my javascript execute just the first lines ? Prestashop

Issue

I am building a website with the CMS Prestashop,and I am trying to change its style. In prestashop we can add one javascript file and do some change, however the system executes just the first lines.So the question is, why ?

Maybe its comes from my code.

window.onscroll = function () {
    var title = document.getElementById('header_menu');
    if (window.pageYOffset > 100) {
        title.classList.add("white_menu");
    } else {
        title.classList.remove("white_menu");
    }
};

var title_cat = document.getElementById("main").getElementsByClassName( 'h1' )[0];
title_cat.classList.add("font_size_null");

var research_bar= document.getElementById('_desktop_search');
research_bar.classList.add("research");

When i try to change the order of my lines just the first change is implemented.

Thanks in advance, Malaury

Solution

Probably because the getElementById method is available only on DOMDocument objects (in a browser, the document). You are trying to access the DOMDocument of an element of the DOM, which is not possible to do. (you cannot "chain" multiple getElementById())

To select all h1 elements that are childrens of an element with the "main id", we could use something like:

var title_cat = document.querySelectorAll("#main h1");

or if we are only interested in the first match (like in your example):

var title_cat = document.querySelector("#main h1");

Answered By - GBra 4.669

Answer Checked By - David Marino (PHPFixing Volunteer)