将文件链接到 html 文档时，Javascript 文件不起作用

【问题标题】：Javascript file not working when linking file to a html document将文件链接到 html 文档时，Javascript 文件不起作用
【发布时间】：2020-12-11 09:53:18
【问题描述】：

所以我有一个学校项目要创建一个网站，但我无法正确链接我的 javascript 文件。如下代码所示，javascript 工作正常，它只是引用。我已经像这样引用了 javascript 文件：

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

它不工作。如果有帮助，我正在使用 Atom 文本编辑器。 

const checkbox = document.querySelector('.my-form input[type="checkbox"]');
const btns = document.querySelectorAll(".my-form button");

checkbox.addEventListener("change", function() {
  const checked = this.checked;
  for (const btn of btns) {
    checked ? (btn.disabled = false) : (btn.disabled = true);
  }
});
@import url("https://fonts.googleapis.com/css?family=Open+Sans:400,700");

.topnav {
  background-color: #333;
  overflow: hidden;
}

/* Style the links inside the navigation bar */
.topnav a {
  float: right;
  display: block;
  color: #f2f2f2;
  text-align: center;
  padding: 14px 125.19px;
  text-decoration: none;
  font-size: 17px;
}


/* Change the color of links on hover */
.topnav a:hover {
  background-color: #ddd;
  color: black;
}

/* Add an active class to highlight the current page */
.topnav a.active {
  background-color: #4CAF50;
  color: white;
}

/* Hide the link that should open and close the topnav on small screens */
.topnav .icon {
  display: none;
}
@media screen and (max-width: 600px) {
  .topnav a:not(:first-child) {display: none;}
  .topnav a.icon {
    float: right;
    display: block;
  }
}

/* The "responsive" class is added to the topnav with JavaScript when the user clicks on the icon. This class makes the topnav look good on small screens (display the links vertically instead of horizontally) */
@media screen and (max-width: 600px) {
  .topnav.responsive {position: relative;}
  .topnav.responsive a.icon {
    position: absolute;
    right: 0;
    top: 0;
  }
  .topnav.responsive a {
    float: none;
    display: block;
    text-align: left;
  }
}


/* Links inside the navbar */
.topnav a {
  float: left;
  font-size: 16px;
  color: white;
  text-align: center;

  text-decoration: none;
}

/* The dropdown container */
.dropdown {
  float: left;
  overflow: hidden;
}

/* Dropdown button */
.dropdown .dropbtn {
  font-size: 16px;
  border: none;
  outline: none;
  color: white;
  padding: 14px 126.4px;
  background-color: inherit;

}

.box {
  width: 1100px;
  padding: 10px;
  border : 5px solid #000000;
  margin: 10;


}
/* Dropdown content (hidden by default) */
.dropdown-content {
  display: none;
  position: absolute;
  background-color: #f9f9f9;
  min-width: 160px;
  box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
  z-index: 1;
}

/* Links inside the dropdown */
.dropdown-content a {
  float: none;
  color: black;
  padding: 12px 126.4px;
  text-decoration: none;
  display: block;
  text-align: left;
}

/* Add a grey background color to dropdown links on hover */
.dropdown-content a:hover {
  background-color: #ddd;
}

/* Show the dropdown menu on hover */
.dropdown:hover .dropdown-content {
  display: block;
}
/*
body{
  background: #7f7df9;
}

.contact-us{
  width: 250px;
  background: #fff;
  padding: 50px;
  margin: 100px auto;
  border-radius: 30px;
  position: relative;
}

.title h1{
  color: #535274;
  letter-spacing: 5px;
  margin-bottom: 25px;
  text-align: center;
}

.form,
.form-items{
  width: 100%;
}

.form-items .input{
  width: 100%;
  margin-bottom: 12px;
  padding: 15px 40px;
  box-sizing: border-box;
  background: #ebeef1;
  border: 0px;
  outline: none;
  border-radius: 30px;
}

.form-items .input.message{
  height: 125px;
  border-radius: 15px;
  margin-bottom: 30px;
  padding: 15px 15px;
  resize: none;
}

.btn{
  background: #827ffe;
  text-align: center;
  color: #fff;
  padding: 12px;
  border-radius: 25px;
  cursor: pointer;
}

.btn .fas{
  margin-left: 10px;
  font-size: 12px;
}

.form-items{
  position: relative;
}

.form-items .fas{
  position: absolute;
  top: 15px;
  left: 15px;
  color: #9a99aa;
}

.social-icons{
  position: absolute;
  bottom: -25px;
  left: 50%;
  width: 200px;
  transform: translateX(-50%);
  display: flex;
  justify-content: space-around;
}

.social-icons div{
  width: 50px;
  height: 50px;
  border-radius: 50%;
  position: relative;
  cursor: pointer;
}


.social-icons div .fab{
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%,-50%);
  color: #fff;
}

.social-icons div.facebook{
  background: #5178d9;
}

.social-icons div.twitter{
  background: #41caf6;
}

.social-icons div.google{
  background: #fb4f4f;
}
@import url("https://fonts.googleapis.com/css?family=Open+Sans:400,700");

/* RESET RULES
–––––––––––––––––––––––––––––––––––––––––––––––––– */
:root {
  --white: #afafaf;
  --red: #e31b23;
  --bodyColor: #292a2b;
  --borderFormEls: hsl(0, 0%, 10%);
  --bgFormEls: hsl(0, 0%, 14%);
  --bgFormElsFocus: hsl(0, 7%, 20%);
}

/* {
  padding: 0;
  margin: 0;
  box-sizing: border-box;
  outline: none;
}

a {
  color: inherit;
}
*/
input,
select,
textarea,
button {
  font-family: inherit;
  font-size: 100%;
}

button,
label {
  cursor: pointer;
}

select {
  appearance: none;
}

/* Remove native arrow on IE */
select::-ms-expand {
  display: none;
}

/*Remove dotted outline from selected option on Firefox*/
/*https://stackoverflow.com/questions/3773430/remove-outline-from-select-box-in-ff/18853002#18853002*/
/*We use !important to override the color set for the select on line 99*/
select:-moz-focusring {
  color: transparent !important;
  text-shadow: 0 0 0 var(--white);
}

textarea {
  resize: none;
}

ul {
  list-style: none;
}

body {
  font: 18px/1.5 "Open Sans", sans-serif;
  background: var(--bodyColor);
  color: var(--white);
  margin: 1.5rem 0;
}

.container {
  max-width: 800px;
  margin: 0 auto;
  padding: 0 1.5rem;
}


/* FORM ELEMENTS
–––––––––––––––––––––––––––––––––––––––––––––––––– */
.my-form h1 {
  margin-bottom: 1.5rem;
}

.my-form li,
.my-form .grid > *:not(:last-child) {
  margin-bottom: 1.5rem;
}

.my-form select,
.my-form input,
.my-form textarea,
.my-form button {
  width: 100%;
  line-height: 1.5;
  padding: 15px 10px;
  border: 1px solid var(--borderFormEls);
  color: var(--white);
  background: var(--bgFormEls);
  transition: background-color 0.3s cubic-bezier(0.57, 0.21, 0.69, 1.25),
    transform 0.3s cubic-bezier(0.57, 0.21, 0.69, 1.25);
}

.my-form textarea {
  height: 170px;
}

.my-form ::placeholder {
  color: inherit;
  /*Fix opacity issue on Firefox*/
  opacity: 1;
}

.my-form select:focus,
.my-form input:focus,
.my-form textarea:focus,
.my-form button:enabled:hover,
.my-form button:focus,
.my-form input[type="checkbox"]:focus + label {
  background: var(--bgFormElsFocus);
}

.my-form select:focus,
.my-form input:focus,
.my-form textarea:focus {
  transform: scale(1.02);
}

.my-form *:required,
.my-form select {
  background-repeat: no-repeat;
  background-position: center right 12px;
  background-size: 15px 15px;
}

.my-form *:required {
  background-image: url(https://s3-us-west-2.amazonaws.com/s.cdpn.io/162656/asterisk.svg);
}

.my-form select {
  background-image: url(https://s3-us-west-2.amazonaws.com/s.cdpn.io/162656/down.svg);
}

.my-form *:disabled {
  cursor: default;
  filter: blur(2px);
}


/* FORM BTNS
–––––––––––––––––––––––––––––––––––––––––––––––––– */
.my-form .required-msg {
  display: none;
  background: url(https://s3-us-west-2.amazonaws.com/s.cdpn.io/162656/asterisk.svg)
    no-repeat center left / 15px 15px;
  padding-left: 20px;
}

.my-form .btn-grid {
  position: relative;
  overflow: hidden;
  transition: filter 0.2s;
}

.my-form button {
  font-weight: bold;
}

.my-form button > * {
  display: inline-block;
  width: 100%;
  transition: transform 0.4s ease-in-out;
}

.my-form button .back {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-110%, -50%);
}

.my-form button:enabled:hover .back,
.my-form button:focus .back {
  transform: translate(-50%, -50%);
}

.my-form button:enabled:hover .front,
.my-form button:focus .front {
  transform: translateX(110%);
}


/* CUSTOM CHECKBOX
–––––––––––––––––––––––––––––––––––––––––––––––––– */
.my-form input[type="checkbox"] {
  position: absolute;
  left: -9999px;
}

.my-form input[type="checkbox"] + label {
  position: relative;
  display: inline-block;
  padding-left: 2rem;
  transition: background 0.3s cubic-bezier(0.57, 0.21, 0.69, 1.25);
}

.my-form input[type="checkbox"] + label::before,
.my-form input[type="checkbox"] + label::after {
  content: '';
  position: absolute;
}

.my-form input[type="checkbox"] + label::before {
  left: 0;
  top: 6px;
  width: 18px;
  height: 18px;
  border: 2px solid var(--white);
}

.my-form input[type="checkbox"]:checked + label::before {
  background: var(--red);
}

.my-form input[type="checkbox"]:checked + label::after {
  left: 7px;
  top: 7px;
  width: 6px;
  height: 14px;
  border-bottom: 2px solid var(--white);
  border-right: 2px solid var(--white);
  transform: rotate(45deg);
}


/* FOOTER
–––––––––––––––––––––––––––––––––––––––––––––––––– */
footer {
  font-size: 1rem;
  text-align: right;
  backface-visibility: hidden;
}

footer a {
  text-decoration: none;
}

footer span {
  color: var(--red);
}


/* MQ
–––––––––––––––––––––––––––––––––––––––––––––––––– */
@media screen and (min-width: 600px) {
  .my-form .grid {
    display: grid;
    grid-gap: 1.5rem;
  }

  .my-form .grid-2 {
    grid-template-columns: 1fr 1fr;
  }

  .my-form .grid-3 {
    grid-template-columns: auto auto auto;
    align-items: center;
  }

  .my-form .grid > *:not(:last-child) {
    margin-bottom: 0;
  }

  .my-form .required-msg {
    display: block;
  }
}

@media screen and (min-width: 541px) {
  .my-form input[type="checkbox"] + label::before {
    top: 50%;
    transform: translateY(-50%);
  }

  .my-form input[type="checkbox"]:checked + label::after {
    top: 3px;
  }
}
<html>
<link href="AboutUs.css" rel="stylesheet" type="text/css">

<head>
<img src="Final Logo.jpg" width="106" height="106">
<meta charset="UTF-8">
    <title>choose one already</title>
    <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.5.0/css/all.css">                          also this
</head>




  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">

  <div class="topnav" id="myTopnav">
    <a href="ISTwebsite.html">Home</a>

    <a href="AboutUs.html">About Us</a>
    <div class="dropdown">
      <button class="dropbtn">Stories
        <i class="fa fa-caret-down"></i>
      </button>
      <div class="dropdown-content">
        <a href="#">Jack and Jill</a>
        <a href="#">Cinderalla</a>
        <a href="#">,Mayuka</a>
      </div>
    </div>
    <a href="ContactUsPage.html" class="active" >Contact Us</a>
    <a href="javascript:void(0);" class="icon" onclick="myFunction()">
      <i class="fa fa-bars"></i>
    </a>
  </div>
  <body style="background-color:#faecca">
        <script type="text/javascript" src="ContactUsPage.js"></script>

        <form class="my-form">
          <div class="container">
            <h1>Get in touch!</h1>
            <ul>
              <li>
                <select>
                  <option selected disabled>-- Please choose an option --</option>
                  <option>Request Quote</option>
                  <option>Send Resume</option>
                  <option>Other</option>
                </select>
              </li>
              <li>
                <div class="grid grid-2">
                  <input type="text" placeholder="Name" required>
                  <input type="text" placeholder="Surname" required>
                </div>
              </li>
              <li>
                <div class="grid grid-2">
                  <input type="email" placeholder="Email" required>
                  <input type="tel" placeholder="Phone">
                </div>
              </li>
              <li>
                <textarea placeholder="Message"></textarea>
              </li>
              <li>
                <input type="checkbox" id="terms">
                <label for="terms">I have read and agreed with <a href="">the terms and conditions.</a></label>
              </li>
              <li>
                <div class="grid grid-3">
                  <div class="required-msg">REQUIRED FIELDS</div>
                  <button class="btn-grid" type="submit" disabled>
                    <span class="back">
                      <img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/162656/email-icon.svg" alt="">
                    </span>
                    <span class="front">SUBMIT</span>
                  </button>
                  <button class="btn-grid" type="reset" disabled>
                    <span class="back">
                      <img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/162656/eraser-icon.svg" alt="">
                    </span>
                    <span class="front">RESET</span>
                  </button>
                </div>
              </li>
            </ul>
          </div>
        </form>
        <footer>
          <div class="container">

            </small>
          </div>
        </footer>
  </body>

</html>

【问题讨论】：

    标签： javascript html css atom-editor


    【解决方案1】：

    如果您在本地托管它

    我会确保您提供的 js 到 html 文件的正确相对路径。这往往是最常见的问题。您可能需要在引用脚本位置之前转到父文件夹或执行任何修复相对路径的操作。

    如果您将其托管在服务器上

    我会确保您正在访问正确的端点来检索 CSS 和 js 文件。加载页面时查看 Web 控制台可能会有所帮助。您可能会看到 FILE DNE 错误。

    我还将脚本导入语句移动到head 中的文档顶部。并不是说它修复了您的代码，但它可以帮助您避免潜在的错误。否则，我看不出您的代码有什么明显错误。

    【讨论】：

      【解决方案2】：

      我意识到我将 javascript 引用放在错误的区域（顶部），因为它在复选框出现之前加载。我通过将它移到页面底部来修复它。

      【讨论】：

        猜你喜欢
        • 2021-04-23
        • 1970-01-01
        • 1970-01-01
        • 1970-01-01
        • 2017-10-12
        • 2021-11-26
        • 2012-11-24
        相关资源
        最近更新 更多
        热门标签
        Java Python linux javascript Mysql C# Docker 算法 前端 SpringBoot Redis Vue spring 设计模式 .net core .net kubernetes c++ 数据库 数据结构 大数据 js 机器学习 微服务 Android Go 程序员 面试 JVM ASP.net core 云原生 人工智能 后端 PHP git CSS golang k8s Nginx Django mybatis 深度学习 多线程 React 架构 devops 爬虫 云计算 Spring Boot LeetCode