Question

我按照互联网上的教程学习一些基本的Javascript。其中一个步骤是在用户点击图像后将图像更改为另一个图像，但是，它无法正常工作。我在研究过程中发现了一些教程，但所有这些教程都包含了我尚未学习的功能，所以我希望尽可能多地使用本教程。

这是JS脚本：

var myImage = document.querySelector('img');
myImage.onClick = function() {
    var mySrc = myImage.getAttribute('src');
    if(mySrc === 'images/1.png') {
        myImage.setAttribute ('src', 'images/2.png');
    } else {
        myImage.setAttribute ('src', 'images/1.png');
    }
}

以下是我使用的教程的链接： https://developer.mozilla.org/en-US/Learn/Getting_started_with_the_web/JavaScript_basics

这是该项目的Github链接： https://github.com/Pedro12909/test

Answer 1

问题是.onClick未定义。使用.onclick小写"c"

Answer 2

如果您使用的是查询选择器，则必须为页面中的所有图像绑定click事件。查询选择器将返回HTML元素列表，您将不得不迭代它们。尝试在img标记中添加一个id，比如imageId并进行以下修改。

＆＃13;

var myImage = document.getElementById('imageId');
myImage.onclick = function() {
	var mySrc = myImage.getAttribute('src');
	if(mySrc === 'images/1.png') {
		myImage.setAttribute ('src', 'images/2.png');
	} else {
		myImage.setAttribute ('src', 'images/1.png');
	}
}

＆＃13;

使用JavaScript单击图像后进行更改

2 个答案: