CODEWITHSUNDEEP
javascripthtmlcss
Lahey Corey
Lahey Corey

Reputation: 103

Can't include external javascript in html

I have this website. If I try to include the JavaScript I have between the as an external file, the slider doesn't work. So I take this

<script>
var slideIndex = 1;
showSlides(slideIndex);

function plusSlides(n) {
  showSlides(slideIndex += n);
}

function currentSlide(n) {
  showSlides(slideIndex = n);
}

function showSlides(n) {
  var i;
  var slides = document.getElementsByClassName("mySlides");
  var dots = document.getElementsByClassName("dot");
  if (n > slides.length) {slideIndex = 1}
  if (n < 1) {slideIndex = slides.length}
  for (i = 0; i < slides.length; i++) {
      slides[i].style.display = "none";
  }
  for (i = 0; i < dots.length; i++) {
      dots[i].className = dots[i].className.replace(" active", "");
  }
  slides[slideIndex-1].style.display = "block";
  dots[slideIndex-1].className += " active";
}
</script>

And I move it to an external file like below

<script src="MyScript.js"></script>

Contents of MyScript.js


    var slideIndex = 1;
    showSlides(slideIndex);

    function plusSlides(n) {
      showSlides(slideIndex += n);
    }

    function currentSlide(n) {
      showSlides(slideIndex = n);
    }

    function showSlides(n) {
      var i;
      var slides = document.getElementsByClassName("mySlides");
      var dots = document.getElementsByClassName("dot");
      if (n > slides.length) {slideIndex = 1}
      if (n < 1) {slideIndex = slides.length}
      for (i = 0; i < slides.length; i++) {
          slides[i].style.display = "none";
      }
      for (i = 0; i < dots.length; i++) {
          dots[i].className = dots[i].className.replace(" active", "");
      }
      slides[slideIndex-1].style.display = "block";
      dots[slideIndex-1].className += " active";
    }

Here is my html

<!DOCTYPE html>
<html>
  <head>
<title>Test</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="half.css">
<script src="https://kit.fontawesome.com/845d55b72b.js" crossorigin="anonymous"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
</head>
<body>


<!--info section-->
<section class="infoslide">
<div class="notes">
  <i class="fas fa-code fa-6x"></i>
</div>


  <div class="slider">



<div class="slideshow-container">

  <div class="mySlides">
    <h2>1. JavaScript</h2>
    <p >This slider is created using JavaScript</p>
  </div>

<div class="mySlides">
  <h2>2. Web layout</h2>
  <p > I only created the web layout here. No real content to de displayed. </p>
</div>

<div class="mySlides">
  <h2>3. And the last one</h2>
  <p >Donec vel efficitur ipsum, consectetur adipiscing elit. Donec vel efficitur ipsum. In nulla ante.</p>
</div>

<a class="prev" onclick="plusSlides(-1)"><i class="fas fa-arrow-circle-left fa-2x"></i></a>
<a class="next" onclick="plusSlides(1)"><i class="fas fa-arrow-circle-right fa-2x"></i></a>

</div>

<div class="dot-container">
  <span class="dot" onclick="currentSlide(1)"></span>
  <span class="dot" onclick="currentSlide(2)"></span>
  <span class="dot" onclick="currentSlide(3)"></span>
</div>

<script>
var slideIndex = 1;
showSlides(slideIndex);

function plusSlides(n) {
  showSlides(slideIndex += n);
}

function currentSlide(n) {
  showSlides(slideIndex = n);
}

function showSlides(n) {
  var i;
  var slides = document.getElementsByClassName("mySlides");
  var dots = document.getElementsByClassName("dot");
  if (n > slides.length) {slideIndex = 1}
  if (n < 1) {slideIndex = slides.length}
  for (i = 0; i < slides.length; i++) {
      slides[i].style.display = "none";
  }
  for (i = 0; i < dots.length; i++) {
      dots[i].className = dots[i].className.replace(" active", "");
  }
  slides[slideIndex-1].style.display = "block";
  dots[slideIndex-1].className += " active";
}
</script>

</div>

</section>



</body>
</html>

My CSS

html {
  /*box-sizing: border-box;*/
    font-family: Arial, Helvetica, sans-serif;
    background: rgb(243, 243, 243);

}

body {

  margin: 0px 0px;
    line-height: 1.4;
    padding-left: 0px;
    padding-right: 0px;
    /*background-image: url(top.png) ;*/

    background-repeat: no-repeat;
    background-position: top center , center right;
    background-size: contain;


}


  .infoslide {
    display:grid;
    text-align: center;
    padding: 1.5rem 2rem;
    grid-template-columns: 33.3% auto 33.3%;


    grid-template-areas:
    'one two tree' ;
  }
.notes {
  grid-area: one;
}

.slider {
  grid-area: two;
}

/*html*/

* {box-sizing: border-box}


/* Slideshow container */
.slideshow-container {
  position: relative;
  background: rgb(243, 243, 243);
}

/* Slides */
.mySlides {
  display: none;
  padding-left: 20px;
  text-align: center;
}

/* Next & previous buttons */
.prev, .next {
display: flex;
flex-direction: row;
float: left;
padding: 15px;
color:  rgb(33, 95, 153);

  border-radius: 0 3px 3px 0;
  user-select: none;
}


/* On hover */
.prev:hover, .next:hover {

  color: rgb(182, 176, 165);
}


h2 {color: rgb(40, 40, 175);}
p {color: rgb(117, 115, 115);}

Upvotes: 0

Views: 780

Answers (2)

philip
philip

Reputation: 96

Remove the script tag and its contents from you HTML file. Add the script tag above your body closing tag, your HTML file shoud look like this: 

<!DOCTYPE html>
<html>
  <head>
<title>Test</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="half.css">
<script src="https://kit.fontawesome.com/845d55b72b.js" crossorigin="anonymous"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
</head>
<body>


<!--info section-->
<section class="infoslide">
<div class="notes">
  <i class="fas fa-code fa-6x"></i>
</div>


  <div class="slider">



<div class="slideshow-container">

  <div class="mySlides">
    <h2>1. JavaScript</h2>
    <p >This slider is created using JavaScript</p>
  </div>

<div class="mySlides">
  <h2>2. Web layout</h2>
  <p > I only created the web layout here. No real content to de displayed. </p>
</div>

<div class="mySlides">
  <h2>3. And the last one</h2>
  <p >Donec vel efficitur ipsum, consectetur adipiscing elit. Donec vel efficitur ipsum. In nulla ante.</p>
</div>

<a class="prev" onclick="plusSlides(-1)"><i class="fas fa-arrow-circle-left fa-2x"></i></a>
<a class="next" onclick="plusSlides(1)"><i class="fas fa-arrow-circle-right fa-2x"></i></a>

</div>

<div class="dot-container">
  <span class="dot" onclick="currentSlide(1)"></span>
  <span class="dot" onclick="currentSlide(2)"></span>
  <span class="dot" onclick="currentSlide(3)"></span>
</div>

</div>

</section>


<script src="MyScript.js"></script>
</body>
</html>

Then add the Javascript code into a file named "MyScript.js" which needs to be in the same folder/directory as you html file is inside of.

Upvotes: 0

Run_Script
Run_Script

Reputation: 2548

You need to add the code <script src="MyScript.js"></script> just before the closing body tag in your HTML.

This ensures that the script is loaded and executed directly after the rest of your page, and all the elements on it, have been loaded.

<head>

  ...

</head>


<body>

  ...

  <script src="MyScript.js"></script>

</body>

Upvotes: 1

Related Questions