1

Javascript code

I'm trying to change the text of a label in html to show the file uploaded to the input element that the label points to. I found this javascript code and changed it a little to fit my html. It's not breaking my page but it's not displaying the file name either and I haven't seen this red bar before so I'm wondering if it has something to do with that, or more generally, why the bar is appearing in the first place. Thanks in advance for any tips!

OdatNurd
  • 21,371
  • 3
  • 50
  • 68
Rebecca Collins
  • 11
  • 1
  • 2
  • 3
    Does the red bar highlight whitespace after the `;` which breaks your linting rules? – d4nyll Feb 12 '20 at 23:48
  • 1
    The string constant in the call to `split()` isn't closed correctly so it's running off the end of the line, which isn't vaild. – OdatNurd Feb 13 '20 at 00:10

1 Answers1

3

The red section is a syntax highlight telling you that based on the rules laid out in the syntax definition for whatever language or file type you're using, the text that appears here is not valid. This is something that the syntax definition in use provides, so it doesn't appear in all file types (it relies on the syntax author) and will occur no matter what third party packages such as Linters you might have installed.

The line of code that's doing this is:

fileName = e.target.value.split('\').pop();

The syntax highlighting is giving you 3 different hints here as to what's going wrong (and here on SO the syntax highlighting is providing similar clues):

  1. The end of the line is the obnoxious red color; that indicates that this part of the line (everything after the actual text) is somehow broken
  2. Prior to the red text, the text ).pop(); is yellow, which indicates that it's a string, but it doesn't look like it should be a string at all (technically, you can see that it's the same color as the string in the line above but not the same color as the other function calls like split())
  3. The \' sequence is purple, which indicates that this is being interpreted as a character escape (here we can see that the color of that text is different from what we would expect the content of a string to look like).

Taken all together, the \' doesn't end the string in the argument to split() like you think it does; the string constant continues past there to the end of the line, and since the end of the line is reached without the string being closed, that line is broken.

So, you need to fix the split() call argument to be a valid string. Probably you meant it to be either '\\' (you want to split the string at backslashes) or '\'' (you want to split the string at single quotes).

OdatNurd
  • 21,371
  • 3
  • 50
  • 68