Question

我目前正在开发一个网站，我需要应用某种功能。我有一个图像，我需要它像一个按钮。当用户点击图像我需要一些Javascript来执行，但我似乎没有正确的原因！这是我的代码：

＆＃13;

   onload = function(){
    var yoda = document.getElementById("masteryoda");
    console.log(yoda);

    yoda.onclick() = function () {
    yoda.style.opacity="0.5";
    }
    }

＆＃13;

<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>

＆＃13;

Answer 1

最佳做法：为click事件添加一个监听器。它很容易调试。

 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';
  })
}

Answer 2

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

或者，在图像上添加一个事件监听器。

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>

如何单击图像并使用普通Javascript执行功能

4 个答案: