Итак, я пытаюсь создать оператор If, чтобы сравнить источник моего изображения, чтобы я мог изменить его с соответствующим обратным изображением.
function changeBack() {
let image = document.getElementById('product__picture');
console.log(image);
if(image.src === 'assets/red.jpg'){
image.src = ('assets/red-reversed.jpg');
console.log(image);
} else if(image.src === 'assets/orange.jpg'){
image.src = ('assets/orange-reversed.jpg');
}
HTML:
<article class="product">
<h2 class="hidden">Display Picture</h2>
<img id="product__picture" src="assets/red.jpg" alt="Laptop case">
</article>
Здесь моя кнопка onclick:
<article id="reverse">
<h2 class="subtitle">Select side</h2>
<div id="reverse__container">
<p id="front" class="reverse__text">Front</p>
<p id="back" class="reverse__text" onclick="changeBack();">Back</p>
</div>
</article>
Вам нужно проверить свойство src
а не объект.
Кстати, строки не нужны круглые скобки.
function changeBack() {
let image = document.getElementById('product__picture');
if (image.src === 'assets/red.jpg') {
image.src = 'assets/red-reversed.assets';
} else if (image.src === 'assets/orange.jpg') {
image.src = 'assets/orange-reversed.jpg';
}
}
image.src
что image.src
может быть полным URL, а не только assets / red.jpg.
сравните свойство src изображений, а не самих объектов изображения! Вам также не нужны дополнительные скобки вокруг свойств строки. кроме того, используйте === вместо == для сравнений равенства того же типа. Я почти никогда не использую двойных равных.
function changeBack() {
let image = document.getElementById('product__picture');
if(image.src === 'assets/red.jpg'){
image.src = 'assets/red-reversed.assets'
} else if(image.src === 'assets/orange.jpg') {
image.src = 'assets/orange-reversed.jpg';
}
}
image.src