Question

嘿，我是编码和尝试拼凑到目前为止所学知识的新手。我现在正尝试通过使用Express将'Drum Kit'项目从本地计算机项目更改为localhost来进行JS DOM操作和表达在一起。我已成功在HTML的“ public”文件夹中加载了HTML和CSS页面。但是，即使我没有更改仍位于项目根文件夹中的JS，提供按钮功能的JS也不再起作用。我该如何运作？

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

index.js-包含纯js和 app.js-包含Express for本地主机

1个index.html文件＆ 1个package.json＆ 1个带有“ css”，“图像”，“声音”子文件夹的公用文件夹。

我的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中的script标签运行该代码。当通过chrome查看本地文件路径时，该代码有效，但是当我与localhost上的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

好吧，我通过在'public'文件夹中创建一个'js'文件夹来解决此问题，在该文件夹中express服务于静态文件，然后在其中传输index.js文件。链接到文件只需要稍作调整，因为“ public”文件夹现在是根文件夹。

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

我认为这意味着任何旨在向HTML提供行为的.js文件也都被视为静态文件，并且只要与express一起使用，就应与图像，css或声音类似地对待。 / p>

Javascript DOM操作可在本地计算机上运行，但不能在本地主机上运行

1 个答案:

Javascript DOM操作可在本地计算机上运行，​​但不能在本地主机上运行

1 个答案:

Javascript DOM操作可在本地计算机上运行，但不能在本地主机上运行