[REACT JS]Why do I keep getting "ERROR in [eslint] ERROR in [eslint] Parsing error: Unexpected token" for using var,=>?

Question

1. I'm getting this error around both the "var" definition inside the event listener. Vs code suggests to add { and, again and again but nothing gets fixed.

2. Also Vs code suggests me to use '{'>'}' instead of =>

    <script> let path = document.querySelector ('path') let pathLength = path.getTotalLength() path.style.strokeDasharray = pathLength + ' ' + pathlength; path.style.strokeDashoffset = pathLength; //I get error for "=>" in the following window.addEventListener('scroll',() => { //I get errors for both of these vars var:scrollPercentage =(document.documentElement.scrollTop+document.body.scrollTop)/(document.documentElement.scrollHeight-document.documentElement.clientHeight) var:drawLength = pathLength*scrollPercentage path.style.strokeDashoffset = pathLength-drawLength }) </script>

Answer 1

You are putting colons after the var and that is not valid javascript syntax. It should be:

 <script>


 let path = document.querySelector ('path')


 let pathLength = path.getTotalLength()


 path.style.strokeDasharray = pathLength + ' ' + pathlength;

 path.style.strokeDashoffset = pathLength;

 //I get error for "=>" in the following


 window.addEventListener('scroll',() => {

     //I get errors for both of these vars

     var scrollPercentage =(document.documentElement.scrollTop+document.body.scrollTop)/(document.documentElement.scrollHeight-document.documentElement.clientHeight)


     var drawLength = pathLength*scrollPercentage

     path.style.strokeDashoffset = pathLength-drawLength
     })

 </script>