rastgele görüntü yazdırma javascript

Question

insanlar resimlerini giriş kutusuna yüklediklerinde, sonuç olarak onlara rastgele bir resim göstermek istiyorum.

ancak resmi yüklediğimde değişmedi, sadece sıfırla düğmesine tıkladığımda değişti. (neden böyle olduğunu bilmiyorum)

bana yardım et lütfen.

işte benim HTML’im

<div class="container file-upload">
<div class="image-upload-wrap" id="quote">
<input
class="file-upload-input"
type="file"
onchange="readURL(this);"
accept="image/*"
/>
<div class="drag-text">
<img src="Img/up-load.svg" class="mt-5 pt-5" width="80" alt="upload-image" />
<h3 class="mb-5 pb-5 pt-3 upload-text">UPLOAD YOUR PICTURE HERE!</h3>
</div>
</div>

<div class="file-upload-content">
<img class="file-upload-image" src="#" alt="your image" />
<div class="image-title-wrap">
<button type="button" onclick="removeUpload()" class="try-again-btn">
<span class="reset">RESET!</span>
</button>
</div>
</div>
</div>

işte js'im

<script>
function readURL(input) {
            if (input.files && input.files[0]) {
                var reader = new FileReader();
                reader.onload = function (e) {
                    $('.image-upload-wrap').hide(); $('.file-upload-image').attr('src', e.target.result);
                    $('.file-upload-content').show(); $('.image-title').html(input.files[0].name);
                };
                reader.readAsDataURL(input.files[0]);
                
                randomImg()
                
            
            } else {
                removeUpload();
            }
        }

        function removeUpload() {
            $('.file-upload-input').replaceWith($('.file-upload-input').clone());
            $('.file-upload-content').hide(); $('.image-upload-wrap').show();
        }
        $('.image-upload-wrap').bind('dragover', function () { $('.image-upload-wrap').addClass('image-dropping');
        });
        $('.image-upload-wrap').bind('dragleave', function () { $('.image-upload-wrap').removeClass('image-dropping');
        });
    </script>

    <script>
        function randomImg() {
            var quotes = [
                {
                    text: '1',
                    img: 'Img/1.jpg',
                },

                {
                    text: '2',
                    img: 'Img/2.jpg',
                },

                {
                    text: '3',
                    img: 'Img/3.jpg',
                },

                {
                    text: '4',
                    img: 'Img/4.JPG',
                },
            ];
            var quote = quotes[Math.floor(Math.random() * quotes.length)];
            document.getElementById("quote").innerHTML =
                '<p>' + quote.text + '</p>' + '<img src="' + quote.img + '">';
        }
    </script>

Üzgünüm çok uzun ama kendi başıma çözemiyorum. Yardımın için gerçekten minnettarım!

Answer 1

düzenlendi:

<script>
    function randomImg() {
        var quotes = [
        {
         text: '1',
        img: 'Img/1.jpg',
     },

    {
        text: '2',
        img: 'Img/2.jpg',
    },

    {
        text: '3',
        img: 'Img/3.jpg',
    },

    {
        text: '4',
        img: 'Img/4.JPG',
    },
];
var quote = quotes[Math.floor(Math.random() * quotes.length)];

 var quoteEl   = 
document.getElementById("quote");
quoteEl.innerHTML =
    '<p>' + quote.text + '</p>' ;
 var quoteImg = new Image();
quoteImg.onload = function(){
quoteEl.appendChild(quoteImg);
};
quoteImg.src = quote.img;
}

bunu randomImg işlevi için deneyin