CODEWITHSUNDEEP
javascripthtmlatom-editor
Clark Fennell
Clark Fennell

Reputation: 65

HTML JavaScript error in atom

I've managed to create some code which makes divs appear when the user clicks the navigation buttons.

This works without the html code inside the javascript (which will be the information shown on the pafge when the use clicks a button).

I've had a huge red error come up on my atom and I cant seem to find what I've done wrong. I've tried using Linter too and nothing is coming up.

Can anyone suggest anything?

Here is an image with the error:

the error I'm getting in Atom

here is the code:

$('#myhtmlcss').click( function() {
      $('#content-reveal').fadeOut( 500, function() {
          $('#content-reveal').html( '<div> <h2>HTML AND CSS</h2> <p>Below is example HTML and CSS for the Aguillar Family Wine Festival Schedule website.</p> <br> <p> <textarea name="textareahtml" rows="10" cols="30" readonly> <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>Aguillar Family Wine Festival</title> <link rel="stylesheet" type="text/css" href="/examples/winestyle.css" /> <link href="https://fonts.googleapis.com/css?family=Oswal" rel="stylesheet"> </head> <body> <header> <h1>Annual Aguillar Family Wine Festival</h1> </header> <div class="container"> <table> <thead> <tr> <th colspan="2"> <h1>Wine Festival Schedule</h1> </th> </tr> <tr> <th> <h2>Time</h2> </th> <th> <h2>Event</h2> </th> </tr> </thead> <tbody> <tr> <td class="left"> <h3>12:00PM</h3> </td> <td> <h3>Welcome Reception</h3> </td> </tr> <tr> <td class="left"> <h3>1:00PM</h3> </td> <td> <h3>Storytelling & Tasting</h3> </td> </tr> <tr> <td class="left"> <h3>2:00 PM</h3> </td> <td> <h3>Wine Luncheon</h3> </td> </tr> <tr> <td> <h3>3:00PM</h3> </td> <td> <h3>Aguillar Family Wines</h3> </td> </tr> <tr> <td> <h3>4:00PM</h3> </td> <td> <h3>Wine & Cheese Tasting</h3> </td> </tr> </tbody> </table> </div> <footer> <h3>Contact</h3> <h3>Location</h3> <h3>Privacy Policy</h3> </footer> </body> </html> </textarea> <textarea name="textareacss" rows="10" cols="30" readonly></textarea> </p> <p><a href="/example/wineindex.html" alt="Aguillar Family Wine Festival Schedule">CLICK HERE TO SEE THE EXAMPLE ABOVE IN ACTION</a> </p> <p>This site is also another example of my HTML, CSS & SCSS skills. The code for this website, plus plenty of other examples, are on my <a href="https://www.github.com/clarkfennell">GITHUB</a>. </p> </div>' );
          $('#content-reveal').fadeIn( 500 );
        } );
  } );

Upvotes: 1

Views: 207

Answers (2)

idleberg
idleberg

Reputation: 12882

For performance reasons, Atom will stop looking at a line when it exceeds ~1000 characters. Fortunately, there are a few options to circumvent this:

Use Tree Sitter

As of Atom v1.25, there's a new experimental parsing system called tree-sitter. You can enable it in the Atom core settings:

enter image description here

Note: You might have to close and re-open your file (or re-assign the grammar) for the changes to apply.

Change Your Code

Alternatively, you can always split up your code into smaller chunks and concatenate them to avoid very long strings. This might also make it easier to maintain.

Upvotes: 1

Jessica
Jessica

Reputation: 2051

This may be caused by the fact you have <html> written inside the .Html tag.

Unless it's inside an iframe, you shouldn't write <html>.

You can escape the brackets using

  • &lt; (<)
  • &gt; (>)

Upvotes: 0

Related Questions