Question

Hy Guys

我的Java语言有问题。自从我实现了Bootstrap之后，它就不再起作用了。甚至带有onclick功能的警报之类的简单事情也无法使用。

这是我的代码：

Implementet脚本

<link type="text/css" href="../CSS/main1.css" rel="stylesheet" />
<link href="https://fonts.googleapis.com/css?family=Montserrat" rel="stylesheet">
<script src="https://code.jquery.com/jquery-3.3.1.min.js"></script>

<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" integrity="sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO" crossorigin="anonymous">
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js" integrity="sha384-ChfqqxuZUCnJSK3+MXmPNIyE6ZbWh2IMqE241rYiqJxyMiZ6OW/JmZQ5stwEULTy" crossorigin="anonymous"></script>

<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.5.0/css/all.css" integrity="sha384-B4dIYHKNBt8Bc12p+WXckhzcICo0wtJAoU8YZTY5qE0Id1GSseTk6S+L3BlXeVIU" crossorigin="anonymous">

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

<meta name="viewport" content="width=device-width, initial-scale=1">

简单HTML

<!DOCTYPE html>
<html>
  <head>
    <?php require 'scripts.php'; ?>
  </head>

  <header>
    <?php include 'header.php'; ?>
  </header>

  <body>
    <div class="container-fluid d-block d-sm-none">
      <!-- LAYOUT FOR MOBILE -->
      <div class="row">
        <div class="col">
          <button class="s-button" id="show-login" onclick="test()">Login</button>
        </div>
      </div>

      <div class="row">
        <div class="col">
          <button  class="s-button">Register</button>
        </div>
      </div>
    </div>
  </body>
</html>

JavaScript

function test(){
  alert('hallo');
}

我正在编程，因为有点了解，所以有可能我忽略了一些简单的东西，但我没有看到它。

Answer 1

确保将JS函数放在HTML中的实际调用之前。另外，请检查您的JS控制台以查看是否存在任何错误。

Answer 2

您的JavaScript应该会加载，而您可以直接直接使用(defn stripSame [word wordList] (-> wordList set (disj word) vec)) 并确保已正确解决该问题，即JS确实是大写的。您还可以将main.js文件放在bootstrap js文件上方

<script src="../JS/main.js"></script>

Answer 3

尝试一下：

使用<script type="text/javascript" src="JS/main.js"></script>作为HTML的链接，假设JS目录与index.html文件位于同一目录中。
将链接放置到HTML头中的外部内容。（您的帖子尚不清楚您是否这样做）。如果使用$(document).ready(function(){ //do stuff here });，则无需将它们放在HTML的末尾，但无论如何都应使用它们，因为自从以来，jQuery已包含在您的项目中您正在使用Bootstrap。（您可以在document ready调用之外声明测试函数，应该这样做。）
我非常确定您使用的Bootstrap CSS链接已损坏（或其他原因），因此我将其更改为使用MaxCDN。
我的猜测是您的CSS也不起作用。尝试更改一些明显的东西以进行检查。链接中的“ ..”表示要将“目录”移回一个目录，因此浏览器可能会在不存在该文件的位置查找该文件。

看看this，了解有关如何链接到文件的更多信息，并考虑尝试使用HTML validator。

如果您有任何疑问或对您不起作用，请告诉我。当我开始进行Web开发时，我会花费小时来尝试解决这些问题。

所以您的HTML看起来像：

<!DOCTYPE html>
<html>
<head>
    <meta content="text/html;charset=utf-8" http-equiv="Content-Type">
    <meta content="utf-8" http-equiv="encoding">
    <meta name="viewport" content="width=device-width, initial-scale=1">

    <link type="text/css" href="../CSS/main1.css" rel="stylesheet" />
    <!-- GOOGLE FONTS -->
    <link href="https://fonts.googleapis.com/css?family=Montserrat" rel="stylesheet">

    <!-- JQUERY -->
    <script src="https://code.jquery.com/jquery-3.3.1.min.js"></script>

    <!-- BOOTSTRAP -->
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u"
        crossorigin="anonymous">
    <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js" integrity="sha384-ChfqqxuZUCnJSK3+MXmPNIyE6ZbWh2IMqE241rYiqJxyMiZ6OW/JmZQ5stwEULTy"
        crossorigin="anonymous"></script>
    <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js" integrity="sha384-ChfqqxuZUCnJSK3+MXmPNIyE6ZbWh2IMqE241rYiqJxyMiZ6OW/JmZQ5stwEULTy"
        crossorigin="anonymous"></script>

    <!-- FONT AWESOME -->
    <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.5.0/css/all.css" integrity="sha384-B4dIYHKNBt8Bc12p+WXckhzcICo0wtJAoU8YZTY5qE0Id1GSseTk6S+L3BlXeVIU"
        crossorigin="anonymous">

    <script type="text/javascript" src="JS/main.js"></script>
    <?php require 'scripts.php'; ?>
</head>

<header>
    <?php include 'header.php'; ?>
</header>

<body>
    <div class="container-fluid d-block d-sm-none">
        <!-- LAYOUT FOR MOBILE -->
        <div class="row">
            <div class="col">
                <button class="s-button" id="show-login" onclick="test()">Login</button>
            </div>
        </div>

        <div class="row">
            <div class="col">
                <button class="s-button">Register</button>
            </div>
        </div>
    </div>
</body>
</html>

要获得奖励积分：：如果您需要查看控制台或对Firefox或Chrome浏览器的运行情况一无所知，请点击ctrl shift i并单击一下。如果您认为出了点问题，请点击刷新按钮。

Answer 4

因此，在花了一个多小时弄清楚代码有什么问题之后，我发现第一天该代码是正确的。问题是我正在使用Firefox Mobile Emulator来测试应用程序，并且不会显示任何警报窗口。当我停用仿真并正常运行网站时，单击该按钮时将显示警报框。因此，现在我已经安装了Chrome并在那里进行了测试（也使用移动仿真器进行了测试），并且工作正常。因此Firefox知道了这个问题（如论坛上显示的那样），但他们尚未解决。

无论如何，谢谢大家的帮助。

实施引导程序后Javascript不起作用

4 个答案: