Javascript DOM 操作在本地机器上工作，但在本地主机上不工作

Question

嘿，我是编码新手，正在尝试拼凑到目前为止所学的内容。我现在正在尝试通过使用 express 将 'Drum Kit' 项目从本地机器项目更改为本地主机来将 JS DOM 操作和 express 放在一起。我已经在 'public' 文件夹中成功加载了 HTML 和 CSS 的页面。但是，即使我没有更改仍然驻留在项目根文件夹中的 JS，它也不再起作用。我怎样才能让它发挥作用？

为清楚起见，我有： 2 个 .js 文件：

index.js - 包含纯 js & app.js - 包含本地主机的快递

1 index.html 个文件 & 1 package.json & 1 个 public 个文件夹，其中包含 'css'、'images'、'sounds' 个子文件夹。

我的html代码：

<!DOCTYPE html>
<html lang="en" dir="ltr">

<head>
  <meta charset="utf-8">
  <title>Drum Kit</title>
  <!-- Changed href to reflect root path from 'public' folder -->
  <link rel="stylesheet" href="css/styles.css">
  <link href="https://fonts.googleapis.com/css?family=Arvo" rel="stylesheet">
</head>

<body>
  <h1 id="title">Drum  Kit</h1>
  <div class="set">
    <button class="w drum">w</button>
    <button class="a drum">a</button>
    <button class="s drum">s</button>
    <button class="d drum">d</button>
    <button class="j drum">j</button>
    <button class="k drum">k</button>
    <button class="l drum">l</button>
  </div>

  <script src="index.js"></script>
</body>    
<footer>
  Made with ❤️.
</footer>

我的app.js代码：

const express = require("express");
const bodyParser = require("body-parser");

const app = express();


app.use(express.static("public"));
app.use(bodyParser.urlencoded({extended:true}));


app.get("/", (req, res) => {
    res.sendFile(__dirname + "/index.html");
})


app.listen(3000, (req, res) => {
    console.log("The server is now listening on Port 3000!")
})

我的 index.js 代码（我试图通过 html 中的脚本标记到达运行。在通过 chrome 查看本地文件路径时有效，但是当我在本地主机上与 express 结合使用时却没有）

var buttonArray = document.querySelectorAll("button.drum");

//Detecting Button press
for (i = 0; i < buttonArray.length; i++) {
  buttonArray[i].addEventListener("click", function () {
    var buttonInnerHTML = this.innerHTML;
    checkButtonPressed(buttonInnerHTML);
    buttonAnimation(buttonInnerHTML);
  });
}

//Detecting keyboard press
document.addEventListener("keydown", function (evt) {
  var buttonPressed = evt.key;
  checkButtonPressed(buttonPressed);
  buttonAnimation(buttonPressed);
});

//Function to check what button was pressed and play the respective sounds
function checkButtonPressed(key) {
  switch (key) {
    case "w":
      var crash = new Audio("sounds/crash.mp3");
      crash.play();

      break;
    case "a":
      var kickBass = new Audio("sounds/kick-bass.mp3");
      kickBass.play();

      break;
    case "s":
      var tom1 = new Audio("sounds/tom-1.mp3");
      tom1.play();

      break;
    case "d":
      var tom2 = new Audio("sounds/tom-2.mp3");
      tom2.play();

      break;
    case "j":
      var tom3 = new Audio("sounds/tom-3.mp3");
      tom3.play();

      break;
    case "k":
      var tom4 = new Audio("sounds/tom-4.mp3");
      tom4.play();

      break;
    case "l":
      var snare = new Audio("sounds/snare.mp3");
      snare.play();

      break;

    default:
      console.log(key);
      break;
  }
}

//Function to check what button or key was pressed and change the style

function buttonAnimation(currentKey) {
  var activeButton  = document.querySelector("." + currentKey);
  activeButton .classList.add("pressed");
  setTimeout(function () {
    activeButton .classList.remove("pressed");
  }, 100);
}

Answer 1

好的，我通过在 express 提供静态文件的 'public' 文件夹中创建一个 'js' 文件夹解决了这个问题，然后将 index.js 文件传输到里面。链接到文件只需要一点点调整，因为 'public' 文件夹现在是根文件夹。

<script src="js/index.js"></script>

我认为这意味着任何旨在为 HTML 提供行为的 .js 文件也被视为静态文件，并且只要与 express 一起使用，就可以像图像一样对待, css 或声音。

Javascript DOM 操作在本地机器上工作，但在本地主机上不工作

Javascript DOM Manipulation working on local machine, but not on localhost

javascript

hosting

dom

localhost

express