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

Posted

技术标签:

【中文标题】将文件链接到 html 文档时，Javascript 文件不起作用【英文标题】：Javascript file not working when linking file to a html document 【发布时间】：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://***.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"  >
<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" >
                    </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" >
                    </span>
                    <span class="front">RESET</span>
                  </button>
                </div>
              </li>
            </ul>
          </div>
        </form>
        <footer>
          <div class="container">

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

</html>

【问题讨论】：

【参考方案1】：

如果您在本地托管它

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

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

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

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

【讨论】：

【参考方案2】：

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

【讨论】：

以上是关于将文件链接到 html 文档时，Javascript 文件不起作用的主要内容，如果未能解决你的问题，请参考以下文章

javascrip基础课程-1

Javascrip

操作文件 -------JavaScrip

如何将按钮链接到另一个 html 文件（在 HTML 中）[重复]

将css文件链接到html时如何正确写出本地文件的绝对路径？

如何链接到 html 文档中的 .woff 字体文件