javascript cetak gambar acak

Question

ketika orang mengunggah gambar mereka ke kotak input, saya ingin menunjukkan kepada mereka gambar acak sebagai hasilnya.

Tapi ketika saya upload gambarnya tidak berubah tapi hanya berubah ketika saya mengklik tombol reset. (Saya tidak tahu mengapa menjadi seperti itu)

tolong bantu aku.

ini HTML saya

<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>

ini js saya

<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>

Maaf, ini terlalu lama tetapi saya tidak bisa menyelesaikannya sendiri. Saya sangat menghargai bantuan Anda!

Answer 1

diedit:

<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;
}

coba ini untuk fungsi randomImg