如何点击图片并使用纯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执行功能

回答

相关问题