イメージをクリックしてプレーンなJavascriptで関数を実行する方法

Question

私は現在ウェブサイトを開発しており、特定の機能を適用する必要があります。画像があり、ボタンのように動作する必要があります。ユーザーが画像をクリックすると、私は実行するためにいくつかの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>

Answer 1

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

は、画像上のイベントリスナーを追加します。onclick()onclickに変更します。

Answer 2

ベストプラクティス：クリックイベントのリスナーを追加します。デバッグは簡単です。

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

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

また、あなたのコードに誤りがあります：あなたは機能onclick()とそれに別の関数の設定値を実行しようとしています。

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

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

また

Answer 3

yoda.onclick()をyoda.onclickに変更する必要があります。

yoda.onclick = function() {

yoda.style.opacity="0.5";

}

Answer 4

あなたのコードはヨーダのために何かを見つけるんこの

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>