Thiết kế website giá rẻ

Question

I have the blog named, named with below link…

https://easystockmarketinstitute.blogspot.com/2024/05/candle-patterns-of-stock-market.html

It suppose to load image when we select item from dropdown, but its not working.
here is the code….

I have tried several web address of image but image don’t open.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Easy Learning Institute, Kolhapur</title>
    <style>
        body {
            font-family: Arial, sans-serif;
            margin: 0;
            padding: 0;
            display: flex;
            flex-direction: column;
            align-items: center;
        }

        header {
            background-color: #4CAF50;
            color: white;
            padding: 20px;
            width: 100%;
            text-align: center;
        }

        main {
            padding: 20px;
            width: 100%;
            max-width: 800px;
        }

        .container {
            margin-bottom: 20px;
        }

        label {
            margin-right: 10px;
        }

        select {
            padding: 5px;
        }

        .pattern-display {
            text-align: center;
            margin-top: 20px;
        }

        img {
            max-width: 100%;
            height: auto;
        }

        /* Responsive Design */
        @media (max-width: 600px) {
            main {
                padding: 10px;
            }
        }
    </style>
</head>
<body>
    <header>
        <h1>Easy Learning Institute, Kolhapur</h1>
    </header>
    <main>
        <form>
            <div class="container">
                <label for="chartPattern">Select Chart Pattern:</label>
                <select id="chartPattern" name="pattern" onchange="displayPattern()">
                    <option value="">--Select Pattern--</option>
                    <option value="doji">Doji</option>
                    <option value="hammer">Hammer</option>
                    <option value="inverted-hammer">Inverted Hammer</option>
                    <option value="engulfing">Engulfing</option>
                    <option value="bearish-engulfing">Bearish Engulfing</option>
                    <option value="morning-star">Morning Star</option>
                
      
                </select>
            </div>
        </form>
        <div id="patternDisplay" class="pattern-display">
            <!-- Image of the selected pattern will be displayed here -->
        </div>
    </main>
    <script>
        function displayPattern() {
            const patternDisplay = document.getElementById('patternDisplay');
            const selectedPattern = document.getElementById('chartPattern').value;

            let patternImage = '';

            switch (selectedPattern) {
                case 'doji':
                    patternImage = 'doji.png';
                    break;
                case 'hammer':
                    patternImage = 'hammer.png';
                    break;
                case 'inverted-hammer':
                    patternImage = 'inverted_hammer.png';
                    break;
                case 'bullish-engulfing':
                    patternImage = 'bullish_engulfing.png';
                    break;
                case 'engulfing':
                    patternImage = 'engulfing.png';
                    break;
                case 'morning-star':
                    patternImage ='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi8yW5qPeGKZcKI-ElDwxXThk3CeJMrmyBdDEuB0GZphSvAWz7UCS8BOIM42G-ZSNdRFj2lRbLX4cKqQb2HKBLvqkbsW25d_DP_MKcuZbDG4sEfrcaBAiZ2Hy75yyu_rX6xyfvMlR3DpsqWZlRoNChNkc0DJUN0KiZXLrpHvYUWi6_oQb9LdoZ7d9ssEk0/w1684-h1069-p-k-no-nu/Engulfing-Candlesticks-1.jpg';
                    break;
               
                default:
                    patternImage = '';
            }

            if (patternImage) {
                patternDisplay.innerHTML = `<img src="${patternImage}" alt="${selectedPattern} pattern">`;
            } else {
                patternDisplay.innerHTML = '';
            }
        }
    </script>
</body>
</html>

Thiết kế website giá rẻ

Danh mục

I have started new blog , it suppose to download image while selected form dropdown , but its not working