时间戳

首页 > 解决方案 > 链接jade和javascript文件

javascript - 链接jade和javascript文件

问题描述

我从 Express 开始，在我的第一个程序中已经遇到了问题。下面是我正在使用的代码。布局.jade

doctype html
html
  head
    title= title
    link(rel='stylesheet', href='/stylesheets/style.css')
  body
    block content
    script(type='type/javascript', src='./public/javascripts/temperature.js')

index.jade:

extends layout
block content
  h1= title
  p Welcome to #{title}
  input#textBox(type='text', name='textBox') 
  input#myButton(type='button', value='Random Temperature!', name='myButton', onclick='click()')

温度.js：

const textBox = document.getElementById('tb');
const button = document.getElementById('myButton');
function click(){
    var rnd = Math.floor(Math.random() * 100);
    textBox.value = rnd;
};

当我运行应用程序时，我可以在浏览器中看到文本框和按钮，但是当我单击按钮时没有任何反应。我想我的问题是 3 个文件之间的链接，但我尝试了几件事，但我无法解决问题。我确定这是一个愚蠢的错误，但请原谅我，我才刚刚开始。有什么建议吗？

标签： javascriptexpressclientclient-serverpug

解决方案

1 和 2. 更改：

    script(type='type/javascript', src='./public/javascripts/temperature.js')

至

    script(type='type/javascript', src='/javascripts/temperature.js')

因为./对于相对路径，并且/对于根路径+你不应该包含public在路径中。

  1. 确保您将js文件放在公共文件夹中，并public folder以static folder快递方式提供：
app.use(express.static(__dirname + '/public'))

还有几个问题：

  1. 更改document.getElementById('tb')为document.getElementById('textBox')

  2. 更改script(type='type/javascript', ...)为script(type='text/javascript', ...)

  3. 更改onclick='click()'为onclick='onclicked()'和function click(){更改，function onclicked(){因为我认为单击是 JavaScript 中的保留关键字。

  4. 重命名Layout.jade为，因为您没有layout.jade扩展 这里是项目。layoutLayout

你可以在这里看到这个项目：https ://codesandbox.io/s/nodejs-jade-js-kq945

（请注意，在这个项目中，index.js 是在 src 文件夹中，所以静态文件夹是path.join(__dirname, "../public")，不是path.join(__dirname, "/public")。你也可以在线运行，fork 在线编辑，或者从文件下载 -> 导出到 zip。）

编辑：这是我的调试过程：

  1. 首先我检查了网络选项卡，它没有加载 js 文件。（没有任何错误，实际上没有任何获取js文件的请求）

  2. 我按 cntrl+u 查看源代码，然后单击 .js 链接，它得到错误“404 未找到”，所以我发现地址错误，我发现我应该更改 '/public/js/.. .' 到 '/js/...'。

  3. 即使是现在，网络选项卡中也没有对 js 文件的任何请求，所以我更改<script type='type/javascript'为：<script type='text/javascript'

  4. 现在 js 文件已加载到网络选项卡中，但单击功能不起作用。我click在控制台选项卡中写了，它给了我这个功能。所以该click功能已定义，但onlick='click()'不起作用。几分钟后，我猜到它的click单词问题，所以我重命名了它。

推荐阅读