jquery - Why does my dynamically changing link not work? (Javascript) -
i making flash site changes download link everytime button selected on page corespronding flash file download. weird part got working after week of working on project stopped , have no idea why input 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 left , 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>
the main problem function download(), tried element id "downlink", there no id assigned of tag in html, add id='downlink' tag now. downlink works fine now.
just bit suggestions: have jquery involved, can use jquery selector when dealing dom. more convenient helps keep 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 left , 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>
Comments
Post a Comment