Как изменить одно изображение с помощью одной кнопки ...?

Question

Я создаю HTML-документ для друга. Идея состоит в том, что его ребенок действительно любит автомобили, и поэтому он может зайти на этот сайт и нажать на кнопки на сайте, которые будут давать ему различные изображения автомобилей. Я пытаюсь связать ситуацию, когда на странице будет 9 разных изображений автомобилей, каждое с кнопкой внизу, на которую он может нажать, и это изменит только одно изображение, на которое он нажал. Я изо всех сил пытался добиться этого, и серфинг Stack Overflow для решений еще больше запутал меня. Я надеюсь, что кто-то может помочь.

Вот то, что я уже попробовал ...

HTML -

<div class="carsButton">
    <img src="https://source.unsplash.com/344x220/?cars" width="100%" height="225">
        <div class="card-body">
            <div class="d-flex justify-content-between align-items-center"
                <div class="btn-group">
                    <button type="button" class="btn btn-sm btn-outline-secondary" onClick="buttonClickThing()">Refresh Image</button>
                </div>
            <small class="text-muted">1</small>
        </div>
    </div>
</div>

JS -

function buttonClickThing () {
    var d = new Date();
    document.getElementsByClassName("carsButton", "carsImage").src = "https://source.unsplash.com/344x220/?cars" + d.getTime();

    console.log(' done ');

}

Я поставил «готово»консольный комментарий, чтобы я знал, что кнопка работает правильно. Я увижу «готово» на консоли, но изображение не изменится. Я совершенно уверен, что я неправильно форматирую или неправильно подключаю изображение / кнопку. Я надеюсь, что сообщество здесь может помочь мне.

Answer 1

<div class="carsButton">
<img src="https://source.unsplash.com/344x220/?cars" width="100%" height="225">
    <div class="card-body">
        <div class="d-flex justify-content-between align-items-center">
            <div class="btn-group">
                <button type="button" class="btn btn-sm btn-outline-secondary" onclick="buttonClickThing(this)">Refresh Image</button>
            </div>
        <small class="text-muted">1</small>
    </div>
</div>

JS

function buttonClickThing(elem) {
   var d = new Date();

  elem.closest('.carsButton').querySelector('img').src = 
  "https://source.unsplash.com/344x220/?cars" + d.getTime()

  console.log(' done ');
}

Answer 2

когда вы используетеElementByClassName, он возвращает массив объекта. затем вы должны выбрать первый объект, затем вы можете изменить его атрибут src. используйте этот код:

<div>
    <img class="carsButton" src="https://source.unsplash.com/344x220/?cars" width="500" height="225">
    <div class="card-body">
        <div class="d-flex justify-content-between align-items-center">
                <div class="btn-group">
                    <button type="button" class="btn btn-sm btn-outline-secondary" onClick="buttonClickThing()">Refresh Image</button>
                </div>
            <small class="text-muted">1</small>
        </div>
    </div>
</div>

<script>
    function buttonClickThing () {
    var d = new Date();
    document.getElementsByClassName("carsButton")[0].src = "https://source.unsplash.com/344x220/?cars" + d.getTime();

    console.log(' done ');

}
</script>

Answer 3

Вам нужно обратиться к элементу <img> при вызове document.getElementBy..... Попробуйте использовать следующее решение:

function buttonClickThing () {
    var d = new Date();
    document.getElementById("carImg").src = "https://source.unsplash.com/344x220/?cars" + d.getTime();

}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="carsButton">
    <img src="https://source.unsplash.com/344x220/?cars" id="carImg" width="100%" height="225">
        <div class="card-body">
            <div class="d-flex justify-content-between align-items-center"
                <div class="btn-group">
                    <button type="button" class="btn btn-sm btn-outline-secondary" onClick="buttonClickThing()">Refresh Image</button>
                </div>
            <small class="text-muted">1</small>
        </div>
    </div>
</div>