Как изменить отображаемую картинку в модальном окне?

Question

Как изменить отображаемую картинку в модальном окне?

Рейтинг: 0Ответов: 1Опубликовано: 22.07.2023

Имеем, модальное окно, которое зависит от результата true || false. в нем пока 2 аргумента, время и boolean отвечающий за текст сообщения. нужно еще в зависимости от результата заменить иконку.

function showModal(formattedTime, gameResult) {
    const modal = document.getElementById('myModal2')
    modal.style.display = 'block'
    const modalTimeElement = modal.querySelector('.window__fin_time')
    modalTimeElement.textContent = formattedTime
    const modalTextElement = modal.querySelector('.window__fin_text')
    modalTextElement.textContent = gameResult ? 'Вы выиграли!' : 'Вы проиграли!'
........тут надо что-то написать)
}
        <div id="myModal2" class="window__fin center modal">
            <div class="window__fin_game">
                <div class="window__fin_game2">
                    <span class="window__fin_imgwin">ТУТ ДОЛЖНЫ БЫТЬ КАРТИНКА</span>

                    <div class="window__fin_"> 
                        <p class="window__fin_text">Вы выиграли!</p>
                    </div> 

                    <div class="window__fin_"> 
                        <p class="window__fin_text2">Затраченное время</p>
                    </div> 
                    <div class="window__fin_"> 
                        <p class="window__fin_time">00.12</p>
                    </div> 

                    <button id="restart-button1" class="button button__again ">Играть снова</button>
                </div>
            </div>
        </div>

css javascript html

Источник: Stack Overflow на русском

Answer 1

▲ 0Принят

Можно заменять src у <img> при true или false. Переменные которые не меняются объявляйте вне функции

const imgWin = "https://sun9-59.userapi.com/impg/3OdjcaD_jSxlBPMBsg-T8M6esJBQRENhYW7blw/vWfivtgWgiI.jpg?size=604x378&quality=96&sign=4f07a99ca00b72b5edaa4a3a3c0041ab&type=album";
const imgLoss = "https://sun9-18.userapi.com/impf/c852232/v852232835/1c5f4c/Z53fNKpr7Yc.jpg?size=680x680&quality=96&sign=4d8de6331a085b5facb75b1f236fe19e&type=album";
//Ссылки на картинки в переменных

const modal = document.getElementById('myModal2');
const modalTimeElement = modal.querySelector('.window__fin_time');
const modalTextElement = modal.querySelector('.window__fin_text');
const restartButton = document.getElementById('restart-button1');
const modalImg = modal.querySelector('.img');

function showModal(formattedTime, gameResult) {
  modal.style.display = 'block';
  modalTimeElement.textContent = formattedTime;
  modalTextElement.textContent = gameResult ? 'Вы выиграли!' : 'Вы проиграли!';
  modalImg.src = gameResult ? imgWin : imgLoss;
}

restartButton.addEventListener('click', function() { //Обработчик нажатия кнопки
  const date = new Date();
  const time = date.getHours() + ':' + date.getMinutes() + ':' + date.getSeconds(); //Чтобы в примере не было пусто, решил передавать функции текущую дату 
  const gameResult = Math.random() < .5; //Генератор true/false
  showModal(time, gameResult)
})

.img {
  height: 100px;
}

<div id="myModal2" class="window__fin center modal">
    <div class="window__fin_game">
        <div class="window__fin_game2">
            <span class="window__fin_imgwin"><img class="img" src="https://github.com/playgameservices.png"></span>

            <div class="window__fin_"> 
                <p class="window__fin_text">Вы ещё не играли</p>
            </div> 

            <div class="window__fin_"> 
                <p class="window__fin_text2">Затраченное время</p>
            </div> 
            <div class="window__fin_"> 
                <p class="window__fin_time"></p>
            </div> 

            <button id="restart-button1" class="button button__again ">Играть снова</button>
        </div>
    </div>
</div>

Как изменить отображаемую картинку в модальном окне?

Ответы