VS Code中Bootstrap关联JS文件失效，进度条功能无法触发

1. 表单提交中断JS执行 #

按钮位于<form>标签内，默认类型为submit，点击后会直接提交表单并刷新页面，导致JS函数执行被中断，控制台无法输出内容。

修复方案：

• 方法一：修改按钮类型为button，避免触发表单提交：

<button type="button" class="button-73" onclick="status_move()" value="{{n.6}}" name="b2" role="button">
  View
</button>

• 方法二：在onclick中阻止默认提交行为：

<button class="button-73" onclick="status_move(); return false;" value="{{n.6}}" name="b2" role="button">
  View
</button>

2. JS代码语法与逻辑错误 #

你的JS存在两处关键错误：

• 方法名错误：getElementByClassName应为**getElementsByClassName**（复数Elements），该方法返回HTMLCollection集合，需通过索引获取单个元素。
• 变量提前引用：elem2在console.log(elem2.style.display)之后才定义，会触发ReferenceError。

修正后的JS代码：

function status_move() {
  console.log("hsdfs");
  // 获取第一个myBar元素
  var elem = document.getElementsByClassName('myBar')[0];
  elem.style.display = 'block';
  // 先定义elem2再调用
  var elem2 = document.getElementsByClassName('myProgress')[0];
  console.log(elem2.style.display);
  elem2.style.display = 'none';
}

3. 脚本引入顺序错误 #

Bootstrap 4的JS依赖jQuery，必须先引入jQuery，再引入Bootstrap JS，否则会导致Bootstrap初始化失败，影响自定义JS执行。

修正后的head部分：

<head>
  <meta charset="UTF-8" />
  <meta http-equiv="X-UA-Compatible" content="IE=edge" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  <title>Document</title>
  {% load static %}
  <!-- 先引入Bootstrap CSS -->
  <link href="//maxcdn.bootstrapcdn.com/bootstrap/4.1.1/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css" />
  <!-- 自定义CSS放在Bootstrap之后，避免被覆盖 -->
  <link rel="stylesheet" href="{% static 'file1.css' %}" />
  <!-- 先引入jQuery -->
  <script src="//cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
  <!-- 再引入Bootstrap JS -->
  <script src="//maxcdn.bootstrapcdn.com/bootstrap/4.1.1/js/bootstrap.min.js"></script>
  <script src="{% static 'first.js' %}"></script>
</head>

4. 自定义CSS未生效的解决 #

• 确保自定义CSS文件在Bootstrap CSS之后引入，这样自定义样式才能覆盖Bootstrap默认样式。
• 若内联样式优先级过高，可在自定义CSS中使用!important或更具体的选择器覆盖：

/* 示例：覆盖myBar的背景色 */
.myBar {
  background-color: #f0f0f0 !important;
}

内容的提问来源于stack exchange，提问作者Akhand Chaurasia