0

So I have a school project to make a website and I cannot link my javascript file properly. As seen in the code below, the javascript works fine, it is just the referencing. I have referenced the javascript file like this:

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

and it isn't working. if it helps, I am using Atom text editor. 

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>
Aditya Bavigadda
  • 49
  • 1
  • 6

2 Answers2

0

IF YOU ARE HOSTING IT LOCALLY

I would make sure that you are providing the correct relative path of the js to the html file. That tends to be the most common problem. You may need to go to the parent folder before referencing the script location or do whatever fixes the relative path.

IF YOU ARE HOSTING IT ON A SERVER

I would make sure that you are accessing the correct endpoint to retrieve the CSS and js files. Looking at the web console when you load the page can be helpful. You would probably see FILE DNE errors.

I would also move the script import statement to the top of the document in the head. Not that it fixes your code, but it may help you avoid potential errors. Otherwise, I don't see anything strikingly wrong about your code.

Moustafa Makhlouf
  • 11
  • 2
0

I realised I put the javascript reference in the wrong area(at the top) as it was loading in before the checkbox was there. I fixed it by moving it to the bottom of the page.

Aditya Bavigadda
  • 49
  • 1
  • 6