为什么我的动态更改链接不起作用?(Javascript）
Why does my dynamically changing link not work? (Javascript)
>我正在制作一个闪存站点，每次在页面上选择一个按钮时，都会将其下载链接更改为要下载的核心闪存文件。奇怪的部分是我让它完美地工作，但是在项目上工作了一周后，它就停止了，我不知道为什么任何输入都会很棒。
$(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>
主要问题是函数 download（），您尝试通过 Id "downLink" 获取元素，但在 HTML 中没有为该标签分配 id，所以我现在将 id='downLink' 添加到标签中。下行链路现在工作正常。
只是一点建议：由于您已经涉及jQuery，因此在处理DOM时，您可能可以使用jQuery选择器。这样会更方便，也有助于保持代码的一致性。
$(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>相关文章：
- 幻灯片滚动javascript不起作用
- 当我在浏览器中打开HTML文件时，javascript不起作用
- 来自MDN的循环示例的JavaScript不起作用
- 在IE中切换javascript不起作用的复选框
- 在SVG中创建带有外来对象的文本区域的Javascript不起作用
- 寻呼<李>javascript不起作用
- 想制作一个基于URL的音频播放器，但Javascript不起作用
- 从Android设备浏览时Javascript不起作用
- 在 Javascript 不起作用的情况下为数字添加逗号
- 获取PHP变量的JavaScript不起作用
- 有些JavaScript不起作用
- 保存HTML文件后，Javascript不起作用
- onClick javascript不起作用
- 在Wicket ModalWindow中使用Panel时，HTML中的Javascript不起作用
- Jquery顶部的两行Javascript不起作用
- 当我通过Node服务器提供HTML时，为什么我的页面Javascript不起作用
- Javascript不起作用，但当放置断点并从chrome调试器工具中单击文件时，它可以正常工作
- 为不同的屏幕分辨率加载css样式的Javascript不起作用
- 在IE9中javascript不起作用，但在打开控制台后它就起作用了
- 为什么Javascript不起作用
