stackoom
  简体   繁体   中英

Can't include external javascript in html

 原文  2020-05-13 12:04:36  8   2    javascript/ html/ css

Question

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);}

2 answers

solution1
 1  2020-05-13 12:08:29

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>

solution2
 0 ACCPTED  2020-05-13 15:45:18

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.

暂无
暂无

The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.

Related Question Can't Include External Javascript In File Can't include external javascript file by static URL Use Javascript to Detect OS and Include External HTML How to include an external Javascript to html5 Include external HTML file using native JavaScript Include External Javascript files in HTML - Angular 2 HTML file can't find external javascript function i want to include a external php file into html page using javascript? JavaScript to include external HTML is working in Chrome but not in Internet Explorer and Firefox When is it appropriate to include javascript in your html vs an external .js?
Related Tags
 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM