我在 mamp 服务器上运行的 index.php 没有为我的页面加载任何 javascript 文件答案

【问题标题】：My index.php running on mamp server is not loading any javascript files for my page我在 mamp 服务器上运行的 index.php 没有为我的页面加载任何 javascript 文件
【发布时间】：2020-01-04 03:40:51
【问题描述】：

在我的 mamp 服务器上运行的 index.php 没有加载我项目中的任何 javascript 文件。我还应该补充一点，我正在学习这个。我对 html 有很好的经验，但我对将 html 与 php 结合起来是新手。

我必须使用 php 将 html 表单链接到电子邮件。为此，我必须将 index.html 更改为 index.php，这需要我运行 mamp 才能查看网页。

现在我的 localhost 服务器上运行了该网页，该页面没有在我的项目中运行我的任何 javascript 文件。

文件结构如下：项目/ css/style.css 字体/ img/图像文件 js/script.js 和其他 .js 文件 index.php

这是我在 js/script.js 中的表单部分

$(document).ready(function(){
    $("#flip-down").click(function(){
      $("#flip-down-panel").slideToggle("slow");
    });
  });

#flip-down-panel, #flip-down {
    padding: 5px;
    text-align: center;
    background-color: #e5eecc;
    border: solid 1px #c3c3c3;
  }
  
  #flip-down-panel {
    padding: 50px;
    display: none; /* <<<<< remove this line to view what's suppose to display
  }

<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>contactform</title>
  <link rel="stylesheet" href="css/bootstrap.min.css">
  <link rel="stylesheet" href="style.css">
  <script type="text/javascript" src="script.js"></script>
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>

</head>

<body>
  <section id="contact">
    <div class="container">
      <h2 id="flip-down">
        <font color="black">CONTACT ME</font>
      </h2>
      <div id="flip-down-panel">
        <form action="contactform.php" method="POST">
          <h3>Tell Me Something</h3>
          <div class="row">
            <label>Name:</label>
            <?php
            if (isset($_GET['name'])) {
              $name = $_GET['name'];
              echo '<input name="name" type="username" placeholder="First Name" value="'.$name.'">';
            } else {
              echo '<input name="name"type="username" placeholder="First Name">';
            }
            ?>
          </div>
          <div class="row">
            <label>Email</label>
            <?php
            if (isset($_GET['email'])) {
              $email = $_GET['email'];
              echo '<input name="email" type="email" placeholder="Email address" value="'.$email.'">';
            } else {
              echo '<input name="email" type="email" placeholder="Email address">';
            }
            ?>
          </div>
          <div class="row">
            <label>Message</label>
            <?php
            if (isset($_GET['message'])) {
              $message = $_GET['message'];
              echo '<textarea type="text" placeholder="Write message" value="'.$message.'"></textarea>';
            } else {
              echo '<textarea type="text" placeholder="Write message"></textarea>';
            }
            ?>
          </div>
          <div class="row">
            <input type="submit" class="btn btn-sub" value="Send Message">
          </div>
        </form>
        <?php
        if (!isset($_GET['contactUs'])) {
          exit();
        } else {
          $contactUsCheck = $_GET['contactUs'];
          if ($contactUsCheck == "empty") {
            echo '<p class="error">You MUST fill out all fields!</p>';
            exit();
          } elseif ($contactUsCheck == "char") {
            echo '<p class="error">You used invalid characters for Name!</p>';
            exit();
          } elseif ($contactUsCheck == "invalidemail") {
            echo '<p class="error">You entered an invalid email!</p>';
            exit();
          } elseif ($contactUsCheck == "mailsent") {
            echo '<p class="success">Your message has been sent!</p>';
            exit();
          }
        }
        ?>
      </div>
    </div>
  </section>
  <!--FOOTER-->
  <section>
    <div id="flip-down">
        <div>Copy Right stuffs</div>
    </div>
  </section>
</body>

</html>

【问题讨论】：

打开浏览器，运行你的页面，按 F12 键，查看控制台选项卡，如果有的话，会显示什么错误消息。如果您正确报告了您的文件夹结构，则更改 include '../js/script.js';包括“js/script.js”；看看是否有帮助。
@jeff 我收到一个名为“加载资源失败：net::ERR_BLOCKED_BY_CLIENT”的错误，这些错误似乎来自页面上 youtube 的嵌入式播放器
我认为您发布的 HTML 内容不足以做出诊断。您在哪里以及如何引用您的 JavaScript，例如 <script src="foo.js">？

标签： javascript php html localhost mamp

【解决方案1】：

我自己在 PHP 方面的经验并不多，但如果我没记错的话，include 只是将文件的内容放入调用它的位置。不要在 PHP 中包含 JS 文件，而是尝试像这样创建一个 HTML 标记：

<script src="/js/script.js" type="text/javascript"></script>

编辑：关于您更新的代码，我注意到在您的 CSS 和 HTML 中有 2 个 ID，flip-down 和 flip-down-panel，但在您的 JS 中，您只有 @987654326 @ 和 panel。将 JavaScript 中的选择器分别更改为 flip-down 和 flip-down-panel 后，您发布的示例运行良好。

顺便说一句，ID 只意味着在所有 DOM 元素中都是唯一的，所以如果你有一个 ID 需要多次使用，比如flip-down，我建议将其更改为一个类，以便它当您尝试使用该 ID 引用所有内容时，不会导致 JavaScript 出现问题。

最后一件事，将引用 JQuery 的脚本标签放在使用它的标签之前，因为它必须先加载才能使用。

【讨论】：

好的，所以我将依赖项移到了 php 标签上方，但它没有改变任何东西。我尝试注释掉包含我在上面发布的大 if 语句的底部 php 块，并修复了在该部分之后显示页脚的一件事。我还测试了从代码中删除
并且基本上解决了我在触发 id 连接到 js 端的 javascript 时遇到的问题
您能分享更多您的 PHP 文件吗？我已经提出了几乎所有我能想到的建议，而不会对您的实施做出过激的假设。
我对帖子进行了编辑，不确定您是否看到@jesse。如果需要，我可以发布更多 PHP 文件
我刚刚更新了我的答案，如果你想看看它并给我你的想法:) @MichaelAguayo
嘿，我刚刚看到了编辑，我再次编辑了我的帖子以修复 js。它现在可以工作，但奇怪的是它在 MAMP 服务器上运行时仍然无法在我的项目中工作。至于ID旁注，我只是按照w3schools的这个来实现这个w3schools

【解决方案2】：

像往常一样加载你的 js 文件：<script src="js/script.js"></script>

如果你真的希望它直接包含在 php 中（看不到这样做的真正理由，但你可以..）确保将它包含在 <script> 标记之间，如下所示：

...
<label class="sr-only">Name</label>
    <script>
        <?php 
            include 'js/script.js';
        ?>
    </script>
    <?php
        if( isset($_GET['name']) ) {
        ...

还要确保文件路径正确

【讨论】：