Как заменить картинку на другую в Javascript

Question

Всем привет, я не так давно изучаю программирование, решила закрепить знания, создав свой первый простой сайт. Суть его в том, чтобы выбрав 2 параметра "температура" и "погода" при нажатии на кнопку показывалась картинка с необходимой одеждой в соответствии с погодой. И на этапе проверки работы скрипта, первая картинка отображается как положено, по другим параметрам уже ничего не отображается и в консоли ошибка "Uncaught ReferenceError: Cannot access 'img' before initialization at getSelectedValueWithJQuery (weather.js:32:77) at HTMLButtonElement.onclick (weather-index.html:40:52)".

function getSelectedValueWithJQuery() {
    let selectedValue1 = $('#mySelect1').val();
    let selectedValue2 = $('#mySelect2').val();
    let result = selectedValue1 + '+' + selectedValue2;
    console.log(result);

    switch (true) {
        case selectedValue1 === "value1" && selectedValue2 === "value11":
            let img = document.createElement('img');
            img.src = 'C:/Users/marin/OneDrive/Рабочий стол/Web Developer Course/Weater-project/Images/1.webp';
            document.getElementById('image-container').append(img);
            break;
        case selectedValue1 === "value1" && selectedValue2 === "value5":
            newImg = document.createElement('img');
            newImg.src = 'C:/Users/marin/OneDrive/Рабочий стол/Web Developer Course/Weater-project/Images/3.jpg';
            document.getElementById('image-container').replaceChild(newImg, img);
            break;
    }
}

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" type="text/css" href="weather-style.css">
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.7.1/jquery.min.js"></script>
    <title>Clothes</title>
</head>

<body>



    <h2>
        Как одеть ребенка в соответствии с погодой?
    </h2>
    <p>Для каждого из нас порой бывает непростым определиться с тем, как одеть ребенка по погоде. Наш сервис быстро
        поможет вам справиться с этой задачей. Просто выберите необходимые параметры:</p>

    <select id="mySelect1">Температура:
        <option value="value1">-10 - 0</option>
        <option value="value2">0 - 10</option>
        <option value="value3">10 - 20</option>
        <option value="value4">20+</option>
    </select>


    <select id="mySelect2">Погода:
        <option value="value11">Без осадков</option>
        <option value="value5">Дождь</option>
        <option value="value6">Град</option>
        <option value="value7">Ветер</option>
        <option value="value8">Гроза</option>
        <option value="value9">Метель</option>
        <option value="value10">Снег</option>
    </select>

    <button onclick="getSelectedValueWithJQuery()">Получить выбранное значение</button>

    <div id="image-container">

    </div>



    <script type="text/javascript" src="weather.js"></script>
</body>

</html>

Answer 1

let img = document.createElement('img');

Это выполняется только в первой ветке. Если предполагается, что код всегда выполняется, надо поставить до switch. Если нет, добавить case'ам фигурных скобок и скопировать.

img.src = 'C:/Users/marin/OneDrive/Рабочий стол/Web Developer Course/Weater-project/Images/1.webp';

А это дичь какая-то...

PS: Впрочем, там и дальше какая-то муть.

БЛОГ НА HUSL

Как заменить картинку на другую в Javascript

Ответы (1 шт):