Highlight.ts

export function NewHighlight({el}: {el: HTMLElement | null}, {subtitle}:{subtitle: HTMLElement | null}){
    let TopDistance = 150; 
    console.log("Starting highlight check...")
    console.log("here come el...")
    console.log(el)
    console.log("here comes subtitle...")
    console.log(subtitle)
    if (el != null && subtitle != null){
/*         console.log("here comes el...")
        console.log(el)
        console.log(el.getBoundingClientRect()) */
        if (el.getBoundingClientRect().top < TopDistance + 1 && el.getBoundingClientRect().bottom > TopDistance){
            subtitle.style.color = "blue";
            subtitle.style.backgroundColor = "rgb(133, 15, 120, 0.8)";
            subtitle.style.borderColor = "#850F78"; 
            subtitle.style.marginLeft = "10px"; 
            subtitle.style.paddingRight = "10px";
            subtitle.style.fontWeight = "900";

/*                 console.log("subtitle: ",subtitle)
            console.log("style: ", subtitle.style)
            console.log("color: ",subtitle.style.color)
            console.log("backcolor: ",subtitle.style.backgroundColor)    */     
        }
        else{
            subtitle.style.color = "white";
            subtitle.style.marginLeft = "0"; 
            subtitle.style.backgroundColor = "";
        }
    }
    
  }

  export function Highlight({el}: {el: HTMLElement | null}, {subtitle}:{subtitle: HTMLElement | null}){
    let TopDistance = 150; 
  /*   console.log("Starting highlight check...")
    console.log("here come el...")
    console.log(el)
    console.log("here comes subtitle...")
    console.log(subtitle) */
    if (el != null && subtitle != null){
/*         console.log("here comes el...")
        console.log(el)
        console.log(el.getBoundingClientRect()) */
        if (el.getBoundingClientRect().top < TopDistance + 1 && el.getBoundingClientRect().bottom > TopDistance){
            subtitle.style.color = "blue";
            subtitle.style.backgroundColor = "rgb(133, 15, 120, 0.8)";
            subtitle.style.borderColor = "#850F78"; 
            subtitle.style.marginLeft = "10px"; 
            subtitle.style.paddingRight = "10px"; 

/*                 console.log("subtitle: ",subtitle)
            console.log("style: ", subtitle.style)
            console.log("color: ",subtitle.style.color)
            console.log("backcolor: ",subtitle.style.backgroundColor)    */     
        }
        else{
            subtitle.style.color = "white";
            subtitle.style.marginLeft = "0"; 
            subtitle.style.backgroundColor = "";
        }
    }
    
  }