如何點擊圖片並使用純Javascript執行功能

-1

我目前正在開發一個網站，我需要應用某些功能。我有一個圖像，我需要它的行爲像一個按鈕。當用戶點擊圖片時，我需要一些JavaScript來執行，但我似乎沒有得到正確的理由！這裏是我的代碼：如何點擊圖片並使用純Javascript執行功能

onload = function(){ 
 
    var yoda = document.getElementById("masteryoda"); 
 
    console.log(yoda); 
 

 
    yoda.onclick() = function() { 
 
    yoda.style.opacity="0.5"; 
 
    } 
 
    }

<div><img src="https://upload.wikimedia.org/wikipedia/commons/thumb/a/a9/A_sunflower.jpg/260px-A_sunflower.jpg" 
 
alt="Mountain View" id="masteryoda" style="width:304px;height:228px;"></div>

來源

2017-08-04 Stylianos Michael

請問您的代碼中找到的東西尤達？我的意思是，有一個ID伊達的形象？ –

是的！這就是爲什麼我有console.log（yoda）;爲了確保圖像被挑選出來！是的，它確實拿起它，我可以看到它在控制檯 –

<img src="image" onclick="myFunction()">

另外，在圖像上添加事件偵聽器。

來源

2017-08-04 14:04:13 Gamer1120

最佳實踐：添加一個偵聽點擊事件。這將很容易調試。

onload = function(){ 
    var yoda = document.getElementById("masteryoda"); 
    console.log(yoda); 

    yoda.addEventListener('click', function() { 
    this.style.opacity = '0.5'; 
    }) 
}

此外，還有在你的代碼錯誤：您嘗試運行功能onclick()和其他功能它的設定值。更改onclick()到onclick：

onload = function(){ 
    var yoda = document.getElementById("masteryoda"); 
    console.log(yoda); 

    yoda.onclick = function() { 
    yoda.style.opacity = '0.5'; 
    }) 
}

來源

2017-08-04 14:04:13 oboshto

這工作像一個魅力先生！謝謝 –

您必須將yoda.onclick()更改爲yoda.onclick。

yoda.onclick = function() {

yoda.style.opacity="0.5";

}

來源

2017-08-04 14:08:48 LeoScript

試試這個

function changeOpacity() { 
 
var yoda = document.getElementById("masteryoda"); 
 
    yoda.style.opacity="0.5"; 
 
    }

<div onclick='changeOpacity()'> 
 
<img src="https://upload.wikimedia.org/wikipedia/commons/thumb/a/a9/A_sunflower.jpg/260px-A_sunflower.jpg" 
 
alt="Mountain View" id="masteryoda" style="width:304px;height:228px;"> 
 
</div>

來源

2017-08-04 14:15:10

如何點擊圖片並使用純Javascript執行功能

回答

相關問題