堆棧內存溢出
  簡體   English   中英

折射的onclick函數不會運行

[英]refractored onclick function does not run

 原文  2019-06-07 11:39:15  0   3    javascript

問題描述

所以，我做了一個基本的onclick切換頁面。 我編寫了有效的代碼，但是當我嘗試重構它時，它不起作用。 有人可以指出為什么以及如何解決它？

我只為一個圖像嘗試了重構的JS - 為什么在第一個圖像不起作用的情況下嘗試所有圖像。

我將附加HTML，工作JS和重構的JS。 我不會從有效的文件中包含所有JS。 我將提供切換第一個圖像的代碼（我重復使用以切換下五個圖像）。 

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<link rel="stylesheet" type= "text/css"  href="#">
<link href="https://fonts.googleapis.com/css? 
family=Indie+Flower&display=swap" rel="stylesheet">
<title>Dogs to Cats</title>
</head>
<body>
<h1>Dog to Cat Magic!</h1>
    <div class="container">
        <img id ="whiteLab" src="whiteLab.jpg" alt="White Lab">
        <img id ="waterDog" src="waterDog.jpg" alt="Water Dog">
        <img id ="spanielBall" src="spanielBall.jpg" alt="Spaniel with a 
ball">
        <img id="glassesDog" src="glassesDog.jpg" alt="Dog with glasses">
        <img id="brownLab" src="brownLab.jpg" alt="Brown Lab">
        <img id="tiredDog" src="tiredDog.jpg" alt="Tired dog">
    </div>
 <script src="newdogs.js"></script>
 </body>
</html>

//seperate JS document

let whiteLab = document.getElementById("whiteLab");
let whiteLabImage = "whiteLab.jpg";
let fatCat = "fatCat.jpg";
let image_tracker = "whiteLab";

whiteLab.onclick = function(){

if(image_tracker === "whiteLab"){
    whiteLab.src = fatCat;
    image_tracker = "fatCat";
}else{
    whiteLab.src = whiteLabImage;
    image_tracker ="whiteLab";
}
};

//seperate JS document

let whiteLab = document.getElementById("whiteLab");
let whiteLabImage = "whiteLab.jpg"
let fatCat = "fatCat.jpg"
let image_tracker = "whiteLab";

const dogClicker = function (image_tracker, dogsrc, dogImage, catImage){
if (image_tracker === "whiteLab"){
     dogsrc.src = catImage;
     image_tracker = "fatCat";
} else{
    dogsrc.src =dogImage;
    image_tracker = "whiteLab"
};
};


whiteLab.onclick = dogClicker(image_tracker, whiteLab, whiteLabImage, 
fatCat);

3 個解決方案

解決方案1
 0 已采納  2019-06-07 11:57:14

發生這種情況是因為函數dogClicker（）的一個參數和一個全局變量具有相同的名稱 - image_tracker 。 更好地使您的函數的參數變量唯一或直接更改全局變量而不將其傳遞給函數。

此外，如果您添加click事件偵聽器，如下所示： 

whiteLab.onclick = dogClicker(image_tracker, whiteLab, whiteLabImage, 
fatCat);

無論用戶是否實際點擊它，回調函數都將被調用至少一次。

最好這樣做： 

whiteLab.addEventListener("click", function() {
  dogClicker(image_tracker, whiteLab, whiteLabImage, fatCat);
});

這是完整的例子： 

 let whiteLab = document.getElementById("whiteLab"); let whiteLabImage = "https://picsum.photos/id/735/200/300" let fatCat = "https://picsum.photos/id/75/200/300" let image_tracker = "whiteLab"; function dogClicker(imgTrck, dogsrc, dogImage, catImage) { if (imgTrck == "whiteLab") { dogsrc.src = catImage; image_tracker = "fatCat"; } else { dogsrc.src = dogImage; image_tracker = "whiteLab" } } whiteLab.addEventListener("click", function() { dogClicker(image_tracker, whiteLab, whiteLabImage, fatCat); }); 
 <link rel="stylesheet" type="text/css" href="dogs.css"> <link href="https://fonts.googleapis.com/css? family=Indie+Flower&display=swap" rel="stylesheet"> <h1>Dog to Cat Magic!</h1> <div class="container"> <img id="whiteLab" src="https://picsum.photos/id/735/200/300" alt="White Lab"> <img id="waterDog" src="waterDog.jpg" alt="Water Dog"> <img id="spanielBall" src="spanielBall.jpg" alt="Spaniel with a ball"> <img id="glassesDog" src="glassesDog.jpg" alt="Dog with glasses"> <img id="brownLab" src="brownLab.jpg" alt="Brown Lab"> <img id="tiredDog" src="tiredDog.jpg" alt="Tired dog"> </div>

解決方案2
 0  2019-06-07 12:12:44

你分配whiteLab.onclick的方式是錯誤的。

whiteLab.onclick = dogClicker（image_tracker，whiteLab，whiteLabImage，fatCat）;

將調用“dogClicker”函數並將返回的值分配給on，而不是將函數引用分配給whiteLab.onclick

相反，請使用綁定方法。

whiteLab.onclick = dogClicker.bind（null，image_tracker，whiteLab，whiteLabImage，fatCat）;

另外，請始終檢查控制台日志中的錯誤。 他們非常有幫助。 您已在js文件中聲明了變量，第二個js文件中的聲明語句將拋出錯誤，因為變量已經使用相同的名稱聲明。

解決方案3
 0  2019-06-07 12:31:34

所以，我使用了晦澀的推薦並讓它發揮作用！ 我會在這里發布，以便其他人可以在這里閱讀評論，查看我的代碼，並希望了解它是如何工作的。 

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<link rel="stylesheet" type= "text/css"  href="#">
<link href="https://fonts.googleapis.com/css? 
family=Indie+Flower&display=swap" rel="stylesheet">
<title>Dogs to Cats</title>
</head>
<body>
<h1>Dog to Cat Magic!</h1>
<div class="container">
    <img id ="whiteLab" src="whiteLab.jpg" alt="White Lab">
    <img id ="waterDog" src="waterDog.jpg" alt="Water Dog">
    <img id ="spanielBall" src="spanielBall.jpg" alt="Spaniel with a 
ball">
    <img id="glassesDog" src="glassesDog.jpg" alt="Dog with glasses">
    <img id="brownLab" src="brownLab.jpg" alt="Brown Lab">
    <img id="tiredDog" src="tiredDog.jpg" alt="Tired dog">
 </div>
 <script src="newdogs.js"></script>
 </body>
</html>


let whiteLab = document.getElementById("whiteLab");
let whiteLabImage = "whiteLab.jpg";
let fatCat = "fatCat.jpg";
let image_tracker = "whiteLab";

let waterDog = document.getElementById("waterDog");
let waterDogImage = "waterDog.jpg";
let travelCat = "travelCat.jpg";

let spanielBall = document.getElementById("spanielBall");
let spanielBallImage = "spanielBall.jpg";
let giveMeCat = "giveMeCat.jpg";

let glassesDog = document.getElementById("glassesDog");
let glassesDogImage = "glassesDog.jpg";
let noEarsCat = "noEarsCat.jpg";

let brownLab = document.getElementById("brownLab");
let brownLabImage = "brownLab.jpg";
let butterFly = "catButteryfly.jpg";

let tiredDog = document.getElementById("tiredDog");
let tiredDogImage = "tiredDog.jpg";
let smilingCat = "smilingCat.jpg"

function dogClicker(imgTrck, dogsrc, dogImage, catImage) {
if (imgTrck == "whiteLab") {
  dogsrc.src = catImage;
  image_tracker = "fatCat";
} else {
  dogsrc.src = dogImage;
  image_tracker = "whiteLab";
}
} 

whiteLab.addEventListener("click", function() {
dogClicker(image_tracker, whiteLab, whiteLabImage, fatCat);
 });

waterDog.addEventListener("click", function(){
  dogClicker(image_tracker, waterDog, waterDogImage, travelCat);
} );

spanielBall.addEventListener("click", function(){
dogClicker(image_tracker, spanielBall, spanielBallImage, giveMeCat)
});

glassesDog.addEventListener("click", function(){
    dogClicker(image_tracker, glassesDog, glassesDogImage, noEarsCat)
});

brownLab.addEventListener("click", function(){
    dogClicker(image_tracker, brownLab, brownLabImage, butterFly)
});

tiredDog.addEventListener("click", function (){
    dogClicker(image_tracker, tiredDog, tiredDogImage, smilingCat)
});

暫無
暫無

聲明:本站的技術帖子網頁，遵循CC BY-SA 4.0協議，如果您需要轉載，請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.

相關問題 帶有函數的 onclick 不會在單擊按鈕時運行函數 為什么onclick函數在onclick上運行，而在我手動調用時卻不能運行？ 使用onclick運行功能 為什么我把 this.onclick=' '; 放在 function 運行一次？ 為什么我的 onclick 屬性在提交時不運行 function？ 單擊自定義復選框不會運行關聯的onClick函數 運行jQuery函數onclick 在沒有onclick的情況下運行Javascript函數 按鈕的onclick運行功能-不起作用嗎？ ColorBox onClick運行JS函數
相關標簽
 
粵ICP備18138465號  © 2020-2024 STACKOOM.COM