JS & jQuery не загружается в HTML (Express) - PullRequest
0 голосов
/ 02 декабря 2018

Я пытаюсь загрузить статический код JS и jQuery в статический html-файл в экспрессе, что очень ново для меня.Я настроил приложение и могу получить к нему доступ по адресу localhost: 3000 с загрузкой HTML и CSS по своему усмотрению, но jQuery и JS - нет.

Заголовок HTML:

<head>
<meta charset="utf-8">
<title>Intellectual Principles</title>
<meta name="description" content="Intellectual Principles">
<meta name="author" content="Ronnlidd">
<link rel="stylesheet" type="text/css" href="/stylesheets/style.css">
<script src="../node_modules/jquery/dist/jquery.min.js"></script>
<script type="text/javascript" src="/javascripts/BoostOdds.js"></script>
<!-- COMMENTS FOR UNDERSTANDING THIS FILE -->
<!-- class="p" is default principle box, class="pv2" is a second version of a principle box, suitable for grid-items, often overwritten withs styles for specifici levels of principles.-->
</head>

Структура папки: Open img in new tab.

App.js

    var express = require('express');
var path = require('path');
var cookieParser = require('cookie-parser');
var logger = require('morgan');

var indexRouter = require('./routes/index');
var usersRouter = require('./routes/users');

var app = express();

app.use(logger('dev'));
app.use(express.json());
app.use(express.urlencoded({ extended: false }));
app.use(cookieParser());

app.use(express.static(path.join(__dirname, 'public')));    


app.use('/', indexRouter);
app.use('/users', usersRouter);

module.exports = app;

Узел консоли:

PS C:\CodingProjects\Principles> npm start

> principles@0.0.0 start C:\CodingProjects\Principles
> node ./bin/www

GET / 304 7.392 ms - -
GET /stylesheets/style.css 304 1.311 ms - -
GET /node_modules/jquery/dist/jquery.min.js 404 4.623 ms - 177
GET /javascripts/BoostOdds.js 304 5.782 ms - -

BoostOdds.js

function oneElmToggle(elm) {
    const display = elm.nextSibling.style.display;
    if (display === "none" || display === "") {
      elm.nextSibling.style.display = "block";
    }
    else {
      elm.nextSibling.style.display = "none";
    }
  }
  window.onload = function () {
    $("#toggleAllElms").click(function () {
      $(".toggleAcronym").toggle('fast');
    });
  };

СоответствующийHTML (в index.html):

<div id="p1136Acronyms"> <!-- First jQuery/JS -->
    <button onclick="oneElmToggle(this)">RWE</button>
    <p class="toggleAcronym">Real World Example</p> 

    <button onclick="oneElmToggle(this)">CRUD</button>
    <p class="toggleAcronym">Create, Read, Update, Delete</p>

    <button onclick="oneElmToggle(this)">CNS</button>
    <p class="toggleAcronym">Central Nervous System</p>

    <button onclick="oneElmToggle(this)">MPS</button>
    <p class="toggleAcronym">Muscle Protein Synthesis</p>

    <button onclick="oneElmToggle(this)">I.e.</button>
    <p class="toggleAcronym">In essence</p>

    <button onclick="oneElmToggle(this)">ALAP</button>
    <p class="toggleAcronym">As Long As Possible</p>

    <button onclick="oneElmToggle(this)">AMAP</button>
    <p class="toggleAcronym">As Much As Possible</p>

    <button onclick="oneElmToggle(this)">CoC</button>
    <p class="toggleAcronym">Contents of Consciousness</p>

    <button onclick="oneElmToggle(this)">RR(P)(F)-R</button>
    <p class="toggleAcronym">Risk Reward (Probability)(Fragility) - Ratio</p>

    <button onclick="oneElmToggle(this)">AoL</button>
    <p class="toggleAcronym">Area of Life (My arbitrarily created 4 AoL are: Intellectual, Physical, Relationships & Intellectual)</p>

    <button onclick="oneElmToggle(this)">MBS</button>
    <p class="toggleAcronym">Mind Body & Spirit</p> 

    <button onclick="oneElmToggle(this)">QoC</button>
    <p class="toggleAcronym">Quality of Consciousness</p>

    <button onclick="oneElmToggle(this)">PFC</button>
    <p class="toggleAcronym">Pre-Frontal Cortex</p>

    <button onclick="oneElmToggle(this)">SRV</button>
    <p class="toggleAcronym">Survival & Reproduction Value. //(Often used to describe factors with directional effect on this.)</p>

    <button onclick="oneElmToggle(this)">P/T-R</button>
    <p class="toggleAcronym">Practice/Theory-Ratio</p>

    <button id="toggleAllElms"><h2>Toggle All</h2></button>
    <p class="toggleAcronym">This button toggles all acronym explanations to Show/Hide</p>
</div>

Странно для меня то, что JS, кажется, загружается, но функциональность кода, который я тестировал, чтобы работать доне загружается.JQuery, похоже, тоже полностью потерян, хотя я несколько раз проверял, чтобы убедиться, что он действительно находится в Principles / node_modules / jquery / dist / jquery.min.js

Заранее спасибо за помощь и, пожалуйста, спроситеза любую информацию, которую я оставил, что вам нужно.

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.
...