CODEWITHSUNDEEP
javascriptjqueryhtml
cosmichero2025
cosmichero2025

Reputation: 1029

Why does my dynamically changing link not work? (Javascript)

I am making a flash site that changes it download link everytime a button is selected on the page to the corespronding flash file for download. The weird part is I got this working perfectly but after a week of working on the project it just stopped and I have no idea why any input would be great.

     $(document).ready(function () {
            var links = [
        'swfs/#1%20(Special%20Japanese%20Extended%20Dance%20Mix).swf',
        'swfs/$D6.swf',
        'swfs/(MAD)%20Huh.swf'
        ];

         var displaytext = [
        '#1 (Special Japanese Extended Dance Mix)',
        '$D6',
        '(MAD) Huh'
        ];

        var c = 0;
            var flashmovie, test, temp;

            function init() {
                flashmovie = document.getElementById('flashmovie');
                document.getElementById('back').onclick = function () {
                    if (c == 0) {
                        c = links.length;
                    }
                    c--
                    displayFiles();
                    download();
                }

                document.getElementById('next').onclick = function () {
                    if (c == links.length - 1) {
                        c = -1;
                    }
                    c++;
                    displayFiles();
                    download();
                }

                document.getElementById('rand').onclick = function () {
                    temp = c;
                    while (c == temp) {
                        c = Math.floor(Math.random() * links.length);
                    }
                    displayFiles();
                    download();
                }

// Scripts for the left and right arrow key functionality
        document.addEventListener('keydown', function (e) {
            if (e.which == 37) {
                $("#back").click();
            }
        });

        document.addEventListener('keydown', function (e) {
            if (e.which === 39) {
                $("#next").click();
            }
        });

            }

            function displayFiles() {

                test = links[c].substring(links[c].lastIndexOf('.') + 1, links[c].length);
                document.getElementById('title').innerHTML = displaytext[c];

                flashmovie.innerHTML =
                    '<object type="application/x-shockwave-flash" data="' + links[c] + '">' +
                    '<param name="movie" value="' + links[c] + '">' +
                    '<\/object>';
            }

            function download() {
                document.getElementById('downLink').setAttribute('href', links[c]);
                document.getElementById('downLink').setAttribute('download', displaytext[c]);
            }

            window.addEventListener ?
                window.addEventListener('load', init, false) :
                window.attachEvent('onload', init);
        });

HTML

<body>

    <div class="titleText">
            <h1>Anon Curb</h1>
    </div>
    <div id="flashmovie" class="flashMovieSamp">
        <object type="application/x-shockwave-flash" data="swfs/welcomeflash.swf">'+
            <param name="movie" value="http://www.anon-curb.com/swfs/welcomeflash.swf">
        </object>
    </div>
    <!-- end #container -->
    <div id="buttonCon">

        <div id="buttons">
            <button id="next">next</button>

            <button id="rand">Random</button>

            <button id="back">Back</button>
        </div>

    </div>

    <div id="titleCon">
        <a href="swfs/welcomeflash.swf" class="downLink" download="welcomeflash">
            <div id="title">Hit random button</div>
        </a>
    </div>

        <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.0.0-beta1/jquery.min.js"></script>

    <script src="js/flashcollection.js"></script>
</body>

Upvotes: 0

Views: 70

Answers (1)

CY_
CY_

Reputation: 7628

The main problem is function download(), you tried to get the element by Id "downLink", but there is no id assigned of that tag in HTML, so I add the id='downLink' to the tag now. The downlink works fine now.

Just a bit suggestions: as you already have the jQuery involved, you can probably use the jQuery selector when dealing with DOM. It will be more convenient also helps to keep the consistency of code. 

$(document).ready(function () {
    var links = [
        'swfs/#1%20(Special%20Japanese%20Extended%20Dance%20Mix).swf',
        'swfs/$D6.swf',
        'swfs/(MAD)%20Huh.swf'
    ];

    var displaytext = [
        '#1 (Special Japanese Extended Dance Mix)',
        '$D6',
        '(MAD) Huh'
    ];

    var c = 0;
    var flashmovie, test, temp;

    function init() {
        flashmovie = document.getElementById('flashmovie');
        document.getElementById('back').onclick = function () {
            if (c == 0) {
                c = links.length;
            }
            c--
            displayFiles();
            download();
        }

        document.getElementById('next').onclick = function () {
            if (c == links.length - 1) {
                c = -1;
            }
            c++;
            displayFiles();
            download();
        }

        document.getElementById('rand').onclick = function () {
            temp = c;
            while (c == temp) {
                c = Math.floor(Math.random() * links.length);
            }
            displayFiles();
            download();
        }

// Scripts for the left and right arrow key functionality
        document.addEventListener('keydown', function (e) {
            if (e.which == 37) {
                $("#back").click();
            }
        });

        document.addEventListener('keydown', function (e) {
            if (e.which === 39) {
                $("#next").click();
            }
        });

    }

    function displayFiles() {

        test = links[c].substring(links[c].lastIndexOf('.') + 1, links[c].length);
        document.getElementById('title').innerHTML = displaytext[c];

        flashmovie.innerHTML =
            '<object type="application/x-shockwave-flash" data="' + links[c] + '">' +
            '<param name="movie" value="' + links[c] + '">' +
            '<\/object>';
    }

    function download() {
        document.getElementById('downLink').setAttribute('href', links[c]);
        document.getElementById('downLink').setAttribute('download', displaytext[c]);
    }

    window.addEventListener ?
        window.addEventListener('load', init, false) :
        window.attachEvent('onload', init);
});
<html>
    <head>
    <title>Title</title>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.0.0-beta1/jquery.min.js"></script>
    <script src="js/flashcollection.js"></script>
    </head>
<body>
<div class="titleText">
    <h1>Anon Curb</h1>
</div>
<div id="flashmovie" class="flashMovieSamp">
    <object type="application/x-shockwave-flash" data="swfs/welcomeflash.swf">'+
        <param name="movie" value="http://www.anon-curb.com/swfs/welcomeflash.swf">
    </object>
</div>
<!-- end #container -->
<div id="buttonCon">

    <div id="buttons">
        <button id="next">next</button>

        <button id="rand">Random</button>

        <button id="back">Back</button>
    </div>

</div>

<div id="titleCon">
    <a href="swfs/welcomeflash.swf" class="downLink" download="welcomeflash" id="downLink">
        <div id="title">Hit random button</div>
    </a>
</div>
</body>
</html>

Upvotes: 1

Related Questions