用Node.js和受哈巴狗

Question

我试图从这里http://www.w3schools.com/howto/howto_js_tabs.asp

这里显示使用多个代码标签混合JavaScript是我的代码：

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> 

风格。 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; 
} 

我收到此错误：

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) 

如何将javascript与帕格混合？

Answer 1

没有与哈巴狗NPM页面（https://www.npmjs.com/package/pug）上内嵌的JavaScript的一个小例子。基本上它是这样的：

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

另外我不确定你为什么使用部分帕格语法和部分HTML。例如，你有这样的：

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

当它应该是这样的：

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

作为替代（对于JavaScript的），您可以使用include指令，如下解释：https://pugjs.org/language/includes.html，或者你可以把JavaScript放在一个外部文件中（就像你用css做的那样），只需要这么做：

script(src='app.js') 

Answer 2

首先要尝试（whitout更多细节）

如果你使用严格的模式改变这一点：

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

这个

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

如果它的工作原理是教你课程：宣告一切，无处不在。总是。

如果没有，我们需要更多的细节