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

【问题标题】：Javascript DOM Manipulation working on local machine, but not on localhostJavascript DOM 操作在本地机器上工作，但不在本地主机上
【发布时间】：2021-02-18 18:31:26
【问题描述】：

嘿，我是编码新手，我正在尝试将我迄今为止所学的知识拼凑起来。我现在正在尝试通过使用 express 将“Drum Kit”项目从本地机器项目更改为 localhost 来将 JS DOM Manipulation 和 express 放在一起。我已经成功地在“公共”文件夹中加载了带有 HTML 和 CSS 的页面。但是，即使我没有更改仍然驻留在项目根文件夹中的按钮，提供按钮行为的 JS 也不再起作用。我怎样才能让它发挥作用？

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

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

1 index.html 文件 & 1 包.json & 1 个公用文件夹，包含“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);
}

【问题讨论】：

你能改变 app.use(express.static("public"));到 app.use(express.static(__dirname+"public"));
@GrantHerman const path = require('path'); app.use(express.static(path.join(__dirname, "public")));。应该使用path.join
嘿，感谢您的回复，但这些都不能解决我的问题。我试图在项目根文件夹中获取一个 index.js 文件，其中包含用于添加事件侦听器和按键声音的 javascript，但我似乎找不到这样做的方法

标签： javascript express dom localhost hosting

【解决方案1】：

好的，我通过在 express 提供静态文件的“public”文件夹中创建一个“js”文件夹来解决它，然后将 index.js 文件传输到里面。链接到该文件只需要稍作调整，因为“公共”文件夹现在是根文件夹。

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

我认为这意味着任何旨在为 HTML 提供行为的 .js 文件也被视为静态文件，并且只要与 express 一起使用，其处理方式将类似于图像、css 或声音。

【讨论】：