Mixing javascript with node.js and pug

Question

I'm attempting to display multiple tabs using code from here http://www.w3schools.com/howto/howto_js_tabs.asp

Here is my code :

index.pug :

html
  head
  <script>

function openCity(evt, cityName) {
    // Declare all variables
    var i, tabcontent, tablinks;

    // Get all elements with class="tabcontent" and hide them
    tabcontent = document.getElementsByClassName("tabcontent");
    for (i = 0; i < tabcontent.length; i++) {
        tabcontent[i].style.display = "none";
    }

    // Get all elements with class="tablinks" and remove the class "active"
    tablinks = document.getElementsByClassName("tablinks");
    for (i = 0; i < tablinks.length; i++) {
        tablinks[i].className = tablinks[i].className.replace(" active", "");
    }

    // Show the current tab, and add an "active" class to the link that opened the tab
    document.getElementById(cityName).style.display = "block";
    evt.currentTarget.className += " active";
}
</script>

    title= title
  body
    h3= message

<link rel="stylesheet" type="text/css" href="style.css">

<ul class="tab">
  <li><a href="#" class="tablinks" onclick="openCity(event, 'London')">London</a></li>
  <li><a href="#" class="tablinks" onclick="openCity(event, 'Paris')">Paris</a></li>
  <li><a href="#" class="tablinks" onclick="openCity(event, 'Tokyo')">Tokyo</a></li>
</ul>

<div id="London" class="tabcontent">
  <h3>London</h3>
  <p>London is the capital city of England.</p>
</div>

<div id="Paris" class="tabcontent">
  <h3>Paris</h3>
  <p>Paris is the capital of France.</p> 
</div>

<div id="Tokyo" class="tabcontent">
  <h3>Tokyo</h3>
  <p>Tokyo is the capital of Japan.</p>
</div>

style.css :

/* Style the list */
ul.tab {
    list-style-type: none;
    margin: 0;
    padding: 0;
    overflow: hidden;
    border: 1px solid #ccc;
    background-color: #f1f1f1;
}

/* Float the list items side by side */
ul.tab li {float: left;}

/* Style the links inside the list items */
ul.tab li a {
    display: inline-block;
    color: black;
    text-align: center;
    padding: 14px 16px;
    text-decoration: none;
    transition: 0.3s;
    font-size: 17px;
}

/* Change background color of links on hover */
ul.tab li a:hover {background-color: #ddd;}

/* Create an active/current tablink class */
ul.tab li a:focus, .active {background-color: #ccc;}

/* Style the tab content */
.tabcontent {
    display: none;
    padding: 6px 12px;
    border: 1px solid #ccc;
    border-top: none;
}

I receive this error :

   9|     // Get all elements with class="tabcontent" and hide them
   10|     tabcontent = document.getElementsByClassName("tabcontent");
 > 11|     for (i = 0; i < tabcontent.length; i++) {
---------------^
   12|         tabcontent[i].style.display = "none";
   13|     }
   14| 

malformed each
   at makeError (/Users/node_modules/pug/node_modules/pug-lexer/node_modules/pug-error/index.js:32:13)
   at Lexer.error (/Users/node_modules/pug/node_modules/pug-lexer/index.js:58:15)
   at Lexer.each (/Users/node_modules/pug/node_modules/pug-lexer/index.js:911:12)
   at Lexer.callLexerFunction (/Users/node_modules/pug/node_modules/pug-lexer/index.js:1315:23)
   at Lexer.advance (/Users/node_modules/pug/node_modules/pug-lexer/index.js:1343:15)
   at Lexer.callLexerFunction (/Users/node_modules/pug/node_modules/pug-lexer/index.js:1315:23)
   at Lexer.getTokens (/Users/node_modules/pug/node_modules/pug-lexer/index.js:1371:12)
   at lex (/Users/node_modules/pug/node_modules/pug-lexer/index.js:12:42)
   at Object.load.string.lex (/Users/node_modules/pug/lib/index.js:93:27)
   at Function.loadString [as string] (/Users/node_modules/pug/node_modules/pug-load/index.js:44:24)

How to mix javascript with pug ?

Kevin · Accepted Answer · 2016-10-07 16:26:58Z

4

There is a small example with inline javascript on the pug npm page (https://www.npmjs.com/package/pug). Basically its this:

html
    head
        script (type="text/javascript").
            /* your javascript here */
        title= title

Also I'm not sure why you're using partial pug syntax and partial HTML. For example you have this:

<link rel="stylesheet" type="text/css" href="style.css">

When it should be this:

link(rel="stylesheet" type="text/css" href="style.css")

As an alternative (for the javascript) you can use the include directive, as explained here: https://pugjs.org/language/includes.html, or you could put the javascript in an external file (like you did with your css) and simply do this:

script(src='app.js')

edited Oct 7, 2016 at 16:26

answered Oct 7, 2016 at 16:14

Kevin

25.3k20 gold badges107 silver badges159 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Kevin Over a year ago

my final comment (note this is a comment, not part of the answer!) is that if you really want tabs you might consider using something like twitter bootstrap and get it for free without having to write any css or javascript, see here for example: getbootstrap.com/javascript/#tabs

mtsdev · Accepted Answer · 2016-10-07 16:12:28Z

0

First thing to try ( whitout more details )

if you're using strict mode change this:

for (i = 0; i < tabcontent.length; i++)

to this

for (var i = 0; i < tabcontent.length; i++)

If it works it teach you a lesson: Declare everything, everywhere. Always.

If not, we need more details

answered Oct 7, 2016 at 16:12

mtsdev

6135 silver badges11 bronze badges

1 Comment

Kevin Over a year ago

you're correcting his javascript but the problem has to do with his usage of pug. I won't down vote though, but your answer is unrelated to what he's asking.

Collectives™ on Stack Overflow

Mixing javascript with node.js and pug

2 Answers 2

1 Comment

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related