Я скопировал ваш код, чтобы увидеть, в чем проблема. Я использовал 2 imgs, которые я только что скачал из Google: img1.png и img2.jpeg
Это не сработало. Поэтому я открыл DevTab из Google Chrome.
Итак, мой код:
let colorImage = document.getElementById("colorImage");
let button2 = document.getElementById("button2");
function changeToBW() {
if (colorImage.src == "img1.png") { // colorImage.src = file:///D:/Kokal/Code/JsTests/img1.png
colorImage.src = "img2.jpeg";
}
else {
colorImage.src = "img1.png";
}
}
button2.addEventListener("click", changeToBW);
Проблема в том, что colorImage.src содержит абсолютный путь к файлу. Таким образом, вы никогда не окажетесь в if, в который вы всегда входите в else.
Также вы хотите изменить атрибут src, а не свойство. Так что вам тоже нужно прочитать attr. Способ сделать это с помощью функции getAttribute('src') на colorImage.
После этого вам нужно установить этот атрибут с помощью setAttribute('src', [new value])
Если что-то не понятно, проверьте мой код ниже.
HTML:
<!DOCTYPE html>
<html>
<head>
<title>test</title>
</head>
<body>
<img id = "colorImage" class = "image" src = "./img1.png">
<button id = "button2" type = "button">Change to B&W</button>
<script src="app.js" type="text/javascript"></script>
</body>
</html>
JS:
let colorImage = document.getElementById("colorImage");
let button2 = document.getElementById("button2");
function changeToBW() {
if (colorImage.getAttribute('src') === "./img1.png") {
colorImage.setAttribute('src', "./img2.jpg");
}
else {
colorImage.setAttribute('src', "./img1.png");
}
}
button2.addEventListener("click", changeToBW);