OnClick изменить src изображения
Я пытаюсь сделать это шема с помощью JavaScript, когда я нажимаю кнопку «Переключить», он меняет автомобиль (.png) и текстовое содержимое, связанное с автомобилем, внутри боковой панели (характеристики автомобиля), у меня есть четыре автомобиля. (Я младший разработчик интерфейса и до сих пор понимаю, как с этим справиться),
Если вы можете дать мне несколько подсказок, это очень поможет!
благодарю вас
мой код HTML выглядит так для кнопки:
<div class = "btn" onclick = "changeCar()"> <img id = "img-id" src = "/src/asset/img/pixel-yellow-car.png" alt = ""> <span>SWITCH</span> </div>
Раздел героев:
<div class = "hero_car">
<div class = ""><img id = "hero-car-src" src = "/src/asset/img/pixel-purple-car.png" alt = ""></div>
</div>
Код спецификации автомобиля:
<aside class = "car-specs" id = "img">
<div id = "purple-car-specs">
<div class = "div">
<span>
POWER
<br>
425
</span>
</div>
<div class = "div">
<span>
WEIGHT
<br>
4,140
</span>
</div>
<div class = "div">
<span>
GRIP
<br>
135
</span>
</div>
<div class = "div">
<span>
SHIFT SPEED
<br>
0.350s
</span>
</div>
</div>
<div id = "blue-car-specs">
<div class = "div">
<span>
POWER
<br>
425
</span>
</div>
<div class = "div">
<span>
WEIGHT
<br>
4,140
</span>
</div>
<div class = "div">
<span>
GRIP
<br>
135
</span>
</div>
<div class = "div">
<span>
SHIFT SPEED
<br>
0.350s
</span>
</div>
</div>
<div id = "green-car-specs">
<div class = "div">
<span>
POWER
<br>
425
</span>
</div>
<div class = "div">
<span>
WEIGHT
<br>
4,140
</span>
</div>
<div class = "div">
<span>
GRIP
<br>
135
</span>
</div>
<div class = "div">
<span>
SHIFT SPEED
<br>
0.350s
</span>
</div>
</div>
<div id = "yellow-car-specs">
<div class = "div">
<span>
POWER
<br>
425
</span>
</div>
<div class = "div">
<span>
WEIGHT
<br>
4,140
</span>
</div>
<div class = "div">
<span>
GRIP
<br>
135
</span>
</div>
<div class = "div">
<span>
SHIFT SPEED
<br>
0.350s
</span>
</div>
</div>
</aside>
Редактировать: благодаря Devielu функция onclick работает с несколькими настройками, теперь я думаю о том, как связать эти характеристики автомобиля с правильными изображениями.
Вы можете начать с отслеживания потока данных: откуда берутся данные об автомобиле, как они попадают в браузер, в какую объектную структуру декодируются данные для использования в JavaScript? и т. д. Когда у вас будет эта информация, подумайте о том, чтобы задать вопрос о том, как с ней справиться, если вам это нужно.
![Безумие обратных вызовов в javascript [JS]](https://i.imgur.com/WsjO6zJb.png)
Ответы 1
Вам нужно определить идентификатор для вашего элемента изображения. Что-то вроде этого:
<img id = "img-id" src = "" onclick = "changeCar()" />
Затем вы можете создать массив с путем к изображениям и индексом, чтобы узнать, какое изображение выбрано.
var index = 0;
const images = ["img1.png", "img2.png", "img3.png"];
После этого вы создаете свою функцию changeCar, которая будет обновлять изображение и увеличивать индекс. Если индекс равен images.length, тогда индекс будет сброшен на 0:
function changeCar() {
document.getElementById("img-id").src = images[index];
index += 1;
if (index == images.length) {
index = 0;
}
}
Попробуйте применить что-то подобное и дайте свой отзыв.
Я получаю эту ошибку: imgIndex не определен в changeCar
@B4D о, извини. Я уже исправил это. Вам нужно изменить imgIndex на index.
Большое спасибо, мой друг !! Это работает, мне пришлось кое-что настроить, var index = 0; вместо константного индекса =0; , .src = images[index++] и index == images.length +1 вместо -1, -1 не отображают одно из 4 изображений, но когда я ставлю +1, он показывает, что каждое изображение идеально, но также будет отображать пустой src, я пытаюсь это исправить. Спасибо еще раз за помощь !!
Когда я писал код, я не тестировал его. Я просто хотел дать вам идею. Я уже исправляю ответ.
Предоставьте нам более подробную информацию, чтобы мы могли помочь, например, как выглядит ваш код?