CODEWITHSUNDEEP
javascripthtmlcssslideshow
user3230402
user3230402

Reputation: 25

Beginner with javascript, slideshow wont run

I followed a simple javascript slideshow tutorial. It worked perfect, we put the javascript right into an html document internally. When I tried to link the code to a page I made and tried clicking next or previous, the page would just reload with the first image. Any ideas?

This is my html code

 <!DOCTYPE html>
<html>
<head>
    <link type="text/css" rel="stylesheet" href="stylesheetmusic.css"/>
    <script type="text/javascript" src="slidescript.js"></script>
    <title>New York Knicks</title>
</head>
<body>
    <div id="header">
        <p id="name">Nicholas Johnson</p>
        <a href="mailto:[email protected]">
 <p id="email">[email protected]</p></a>
    </div>
    <div class="left">
        <ul>
            <li><a href="aboutme.html">Home</a></li>
            <li><a href="sports.html">Sports</a></li>
            <li>Hobbies</li>
        </ul>
    </div>
    <div class="right">
        <h4>blink-182</h4>
        <h4>Hometown:</h4>
        <p>San Diego, CA</p>

        <h4>Record label:</h4>
        <p>Independent</p>
        <h4>Band Members:</h4>
            <ul>
                <li>Guitar/Vocal: Tom DeLonge</li>
                <li>Bass/Vocals: Mark Hoppus</li>
                <li>Drums: Travis Barker</li>
            </ul>

        <img src="tom.jpg" name="slideshow" />
        <table>
            <tr>
                        <td align="left"><a href="" onclick="return       change_image(-1)">Previous</a></td>
                <td align="right"><a href="" onclick="return change_image(1)">Next</a></td>
            </tr>
        </table>

        </div>
    <div id="footer">
        <p> 15 Baker lane, Levittown, New York 11756 | Tel: (555) 555-5555</p>
        </div>
    </body>
</html>

This is my javascript file

<script type="text/javascript">
        var Image = new Array("tom.jpg", "mark.jpg", "travis.jpg");
        var Image_Number = 0;
        var Image_Length = Image.length - 1;

        function change_image(num){
            Image_Number = Image_Number + num;

            if (Image_Number > Image_Length){
                    Image_Number = 0;
            }

            if (Image_Number < 0){
                    Image_Number = Image_Length;
            }

            document.slideshow.src= Image[Image_Number];
            return false;

        }

    </script>

Upvotes: 2

Views: 291

Answers (2)

SyntaxLAMP
SyntaxLAMP

Reputation: 985

Putting the Javascript code directly into the HTML file worked for me. If you link to a Javascript file using the <script type = "text/javascript" src="slidescript.js">, then the Javascript file should not include the tags.

Remove those tags from the beginning and end of the Javascript file and you should be good to go.

Upvotes: 0

Nick Coad
Nick Coad

Reputation: 3694

You need to remove the script tags from your JavaScript file. The complete text of your javascript file (slidescript.js) should be:

    var Image = new Array("tom.jpg", "mark.jpg", "travis.jpg");
    var Image_Number = 0;
    var Image_Length = Image.length - 1;

    function change_image(num){
        Image_Number = Image_Number + num;

        if (Image_Number > Image_Length){
                Image_Number = 0;
        }

        if (Image_Number < 0){
                Image_Number = Image_Length;
        }

        document.slideshow.src= Image[Image_Number];
        return false;

    }

Upvotes: 2

Related Questions