我的 javascript function 部分工作/不能正常工作
[英]My javascript function is working partially/ not working properly
問題描述
我已經為 HTML 和 JS 代碼分離了文件。我想制作一個 function ，它允許我在用另一個（如圖像數組（？））單擊它時更改圖像，HTML-JS 鏈接完成如下這個：
<script src="file.js"></script>
我的 HTML 在這里：
`
<!DOCTYPE html>
<html>
<head>
<script src="proiect.js"></script>
</head>
<body>
<img src="images/image7.jpg" alt="path not found" class="dynamic-image" onclick="wrapper(1)">
<img src="images/image10.jpg" alt="path not found" class="dynamic-image" onclick="wrapper(0)">
</body>
</html>
`
我的 JS 代碼：
var wrapper = function changeImg(param) {
'use strict';
var preloads=[],c;
function preload(){
for(c=0;c<arguments.length;c++) {
preloads[preloads.length]=new Image();
preloads[preloads.length-1].src=arguments[c];
}
c=0;
}
if (param==1){
preload('src1');
alert("param=1");}
if(param==0){
preload('src2');
alert("param=0");
}
document.getElementsByClassName('dynamic-image').addEventListener('click',
function() {
c++;
if(c==preloads.length) {
c=0;
}
this.src=preloads[c].src;
});
}
wrapper(param);
我的問題是，當我單擊圖像時，它會顯示消息（參數 = 1 / 參數 = 0），但它不會改變圖像，我不明白為什么......
4 個解決方案
解決方案1
0 2019-11-06 12:48:54
始終將腳本放在正文的末尾，因為您的腳本需要等待所有資源都加載完畢。
解決方案2
0 2019-11-06 13:26:57
你只需要這樣做：
<!DOCTYPE html>
<html>
<head>
</head>
<body>
<img src="images/image7.jpg" alt="path not found" class="dynamic-image" onclick="wrapper(1)">
<img src="images/image10.jpg" alt="path not found" class="dynamic-image" onclick="wrapper(0)">
<script src="proiect.js"></script> <!-- SCRIPT TAG AT THE END OF BODY TAG -->
</body>
</html>
整個問題是這樣的：當您將script標簽放在head中時，您的 function 在創建 DOM 之前觸發......所以它甚至在創建圖像之前執行。 最佳實踐是將腳本放在正文標記的末尾。
解決方案3
0 2019-11-06 13:40:55
在加載所有<img>標簽后，您的 JavaScript 文件需要位於頁面底部。
您可以像這樣格式化 HTML：
<!doctype html>
<html>
<body>
<img src="images/image7.jpg" alt="path not found" class="dynamic-image" onclick="wrapper(1)">
<img src="images/image10.jpg" alt="path not found" class="dynamic-image" onclick="wrapper(0)">
<script type="text/javascript" src="proiect.js"></script>
</body>
</html>
解決方案4
0 2019-11-06 14:51:54
你不需要你的“包裝器（參數）；” 在您的 proiect.js 文件中，因為 function 由圖像的屬性“onclick”調用。
使用 addEventListener function，您無法使用 object，您必須使用 jquery 框架，例如：
var wrapper = function changeImg(param) {
'use strict';
var preloads=[],c;
function preload(){
for(c=0; c<arguments.length; c++) {
preloads[preloads.length] = new Image();
preloads[preloads.length-1].src = arguments[c];
}
c=0;
}
if (param == 1){
preload('images/image10.jpg');
// alert("param=1");
}
if(param == 0){
preload('images/image7.jpg');
// alert("param=0");
}
$('.dynamic-image').on('click', function() {
c++;
if(c == preloads.length) {
c=0;
}
console.log(this.src);
this.src = preloads[c].src;
});
}
還有你的 HTML 文件：
<!DOCTYPE html>
<html>
<head>
</head>
<body>
<img src="images/image7.jpg" alt="path not found" class="dynamic-image" onclick="wrapper(1)">
<img src="images/image10.jpg" alt="path not found" class="dynamic-image" onclick="wrapper(0)">
<script src="proiect.js"></script>
<script src="jquery.min.js"></script>
</body>
</html>
當然，在您的文件夾中添加“jquery.min.js”文件： https://jquery.com/download/
我知道這不是您想要的，但它可以幫助您；-)
我的 javascript function 工作不正常
聲明:本站的技術帖子網頁，遵循CC BY-SA 4.0協議，如果您需要轉載，請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.