admin管理员组

文章数量:1344975

I'm new to this but I'm having trouble getting my external js to work (however it works in the head of HTML doc), I've looked at all solutions on here already.

This is my HTML, the js src is script2.js

<!DOCTYPE html >
<html>
<head>

<link href="css/stylesheetelaine.css" rel="stylesheet" type="text/css"/> 


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

<script src=".6.3/jquery.min.js"></script>

<script src="js/jQuery/jquery.monte.js"></script>     

<meta charset="utf-8">
<title>Gallery</title>


</head>

<body>
<div id="wrapper">

<div id="title">

<h1><a href="index.html"><img src="img/elaine4.png"  width="517" height="185"    alt="elaine cullinan"></a><img src="img/elainefilligree.png" width="235" height="251" alt="elaine"></h1>


<div id="nav">
<ul id>

<li><a href="about.html" title="About">About</a></li>
<li><a href="tattoo.html" title="Tattoo">Tattoo</a></li>
<li><a href="makeup.html" title="Make Up">Make Up</a></li>
<li><a href="gallery.html" title="Gallery">Gallery</a></li>
<li><a href="contact.html" title="Contact">Contact</a></li>

</ul>
</div>

<div id="gallerywrap">

    <div id='example1' class='container'>
        <img src="img/slide/img1.png" alt='An eastern mud turtle hatching.'/>
        <img src="img/slide/img1.png" alt='Just hatched.'/>
        <img src="img/slide/img1.png" alt='After three months.'/>
        <img src="img/slide/img1.png" alt='Taking an occassional bask.'/>
        <img src="img/slide/img1.png" alt='Ornery but healthy at two and a half years.'/>
    </div>




</div>
</body>

</html>

My external js:

        $(function () {
            // Unstyled Example
            $.monte('#example1');


            // Styled Buttons Example
            // (see the CSS in the above style block)
            $.monte('#example2', {auto:false});


            // Callback Example
            // Format and append the HTML:
            $('#example3 > img').each(function(){
                $(this)
                .wrap('<div style="position:relative"/>')
                .parent()
                .append('<div><p>' + $(this).attr('alt') + '</p></div>')
                .append('<img src="frame.png" alt="" class="frame"/>');
            });
            // Hide the text on all but the center slide:
            $('#example3 div div').css({opacity: 0}).eq(0).css({opacity: 0.8});
            // Using the callbacks to reveal and hide the text:
            $.monte('#example3', {
                auto:false,
                callbackIn: function () {
                    $(this[0]).find('div').animate({opacity: 0.8}, 450);
                }, 
                callbackAway: function () {
                    $(this[0]).find('div').animate({opacity: 0}, 450);
                }
            });
        });

I'm new to this but I'm having trouble getting my external js to work (however it works in the head of HTML doc), I've looked at all solutions on here already.

This is my HTML, the js src is script2.js

<!DOCTYPE html >
<html>
<head>

<link href="css/stylesheetelaine.css" rel="stylesheet" type="text/css"/> 


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

<script src="http://ajax.googleapis./ajax/libs/jquery/1.6.3/jquery.min.js"></script>

<script src="js/jQuery/jquery.monte.js"></script>     

<meta charset="utf-8">
<title>Gallery</title>


</head>

<body>
<div id="wrapper">

<div id="title">

<h1><a href="index.html"><img src="img/elaine4.png"  width="517" height="185"    alt="elaine cullinan"></a><img src="img/elainefilligree.png" width="235" height="251" alt="elaine"></h1>


<div id="nav">
<ul id>

<li><a href="about.html" title="About">About</a></li>
<li><a href="tattoo.html" title="Tattoo">Tattoo</a></li>
<li><a href="makeup.html" title="Make Up">Make Up</a></li>
<li><a href="gallery.html" title="Gallery">Gallery</a></li>
<li><a href="contact.html" title="Contact">Contact</a></li>

</ul>
</div>

<div id="gallerywrap">

    <div id='example1' class='container'>
        <img src="img/slide/img1.png" alt='An eastern mud turtle hatching.'/>
        <img src="img/slide/img1.png" alt='Just hatched.'/>
        <img src="img/slide/img1.png" alt='After three months.'/>
        <img src="img/slide/img1.png" alt='Taking an occassional bask.'/>
        <img src="img/slide/img1.png" alt='Ornery but healthy at two and a half years.'/>
    </div>




</div>
</body>

</html>

My external js:

        $(function () {
            // Unstyled Example
            $.monte('#example1');


            // Styled Buttons Example
            // (see the CSS in the above style block)
            $.monte('#example2', {auto:false});


            // Callback Example
            // Format and append the HTML:
            $('#example3 > img').each(function(){
                $(this)
                .wrap('<div style="position:relative"/>')
                .parent()
                .append('<div><p>' + $(this).attr('alt') + '</p></div>')
                .append('<img src="frame.png" alt="" class="frame"/>');
            });
            // Hide the text on all but the center slide:
            $('#example3 div div').css({opacity: 0}).eq(0).css({opacity: 0.8});
            // Using the callbacks to reveal and hide the text:
            $.monte('#example3', {
                auto:false,
                callbackIn: function () {
                    $(this[0]).find('div').animate({opacity: 0.8}, 450);
                }, 
                callbackAway: function () {
                    $(this[0]).find('div').animate({opacity: 0}, 450);
                }
            });
        });
  • javascript
  • html
  • external
Share Improve this question edited Jan 3, 2013 at 0:15 John Conde 220k99 gold badges462 silver badges501 bronze badges asked Jan 3, 2013 at 0:14 user1944305user1944305 1533 gold badges8 silver badges17 bronze badges 1
  • 1 Are you sure the path is resolving correctly? – Shmiddty Commented Jan 3, 2013 at 0:17
Add a ment  | 

4 Answers 4

Reset to default 3

Move this line:

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

To after where you include jquery.min.js and jquery.monte.js.

Scripts are executed in order, so you need this:

<script src="http://ajax.googleapis./ajax/libs/jquery/1.6.3/jquery.min.js"></script>
<script src="js/jQuery/jquery.monte.js"></script>
<script type="text/javascript" src="js/script2.js"></script>

So that the browser first loads jQuery, then loads the Monte plugin, then does your script.

You're loading before you load jQuery. You need to load it after.

<script src="http://ajax.googleapis./ajax/libs/jquery/1.6.3/jquery.min.js"></script>
<script type="text/javascript" src="js/script2.js"> </script>

To run the external javascript. Declare it at the bottom after tag. It will work. 

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

Make sure that these points are not forgotten:

  1. Add both the js file and the html file in the same directory. Keeping both the files in the same directory may also give an error.

  2. The dot extension of the file (say "external.js") line should look like <script type="text/javascript" src="external.js">. If the source address is changed, you will encounter an error.

本文标签： htmlExternal javascript not working but works in headStack Overflow

版权声明：本文标题：html - External javascript not working but works in head - Stack Overflow 内容由网友自发贡献，该文观点仅代表作者本人， 转载请联系作者并注明出处：http://www.betaflare.com/web/1743805290a2542067.html， 本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌抄袭侵权/违法违规的内容，一经查实，本站将立刻删除。