Link 玉和 javascript 文件

Question

我刚开始使用 Express，但我的第一个程序已经出现问题。下面是我正在使用的代码。 Layout.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()')

temperature.js:

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

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

Answer 1

1和2.变化：

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

到

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

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

确保您的 js 文件位于 public 文件夹中，并以 public folder 作为 static folder 的方式提供：

app.use(express.static(__dirname + '/public'))

还有几个问题：

将document.getElementById('tb')更改为document.getElementById('textBox')
将script(type='type/javascript', ...)更改为script(type='text/javascript', ...)
将onclick='click()'更改为onclick='onclicked()'，将function click(){更改为function onclicked(){，因为我认为click是JavaScript中的保留关键字。
将 Layout.jade 重命名为 layout.jade 因为你扩展了 layout 而不是 Layout 这是项目。

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

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

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

首先我检查了网络选项卡，它没有加载 js 文件。（没有任何错误，实际上没有任何获取js文件的请求）
我按 cntrl+u 检查源代码，然后点击 .js link，它给我错误“404 未找到”，所以我发现地址是错误的，并且我发现我应该将“/public/js/...”更改为“/js/...”。
即使现在，网络选项卡中也没有任何对 js 文件的请求，所以我将：<script type='type/javascript' 更改为 <script type='text/javascript'
现在js文件加载到网络选项卡中，但是点击功能不起作用。我在控制台选项卡中写了 click，它给了我这个功能。所以 click 函数被定义了，但是 onlick='click()' 不起作用。几分钟后，我猜到了click字的问题，所以我给它重命名了

Link 玉和 javascript 文件

Link jade and javascript files

javascript

client

client-server

express

pug