將文件鏈接到 html 文檔時，Javascript 文件不起作用

Question

所以我有一個學校項目要建立一個網站，但我無法正確鏈接我的 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>

Answer 1

如果您在本地托管它

---

我會確保您為 html 文件提供正確的 js 相對路徑。 這往往是最常見的問題。 在引用腳本位置之前，您可能需要 go 到父文件夾或執行任何修復相對路徑的操作。

如果您將其托管在服務器上

---

我會確保您正在訪問正確的端點以檢索 CSS 和 js 文件。 在加載頁面時查看 web 控制台可能會有所幫助。 您可能會看到 FILE DNE 錯誤。

我還將腳本導入語句移動到文件頂部的head中。 並不是說它修復了您的代碼，但它可以幫助您避免潛在的錯誤。 否則，我看不出您的代碼有任何明顯錯誤。

Answer 2

我意識到我將 javascript 引用放在錯誤的區域（頂部），因為它在復選框出現之前加載。 我通過將其移動到頁面底部來修復它。