Как отобразить случайное изображение, используя jQuery и javascript?

Question

Я использую bootstrap и jQuery. У меня есть 4 картинки, и я хочу, чтобы одна из них отображалась случайным образом каждый раз, когда кто-то нажимает на кнопку. Я попытался создать массив изображений, а затем использовать кнопку для вызова функции, но она не работает. Есть идеи, что я делаю не так?

Это кнопка

<div class="container-fluid">
    <div class="row">
        <div class="col-lg-12 col-md-12 col-sm-12 col-xs-12 text-center">
            <button id="button" type="button" class="btn btn-primary">New Photo</button>
        </div>
    </div>
</div>

, где я хочу, чтобы изображение отображалось

<div class="container-fluid">
    <div class="row">
        <div class="col-lg-12 col-md-12 col-sm-12 col-xs-12 text-center">
            <img id="picture">
        </div>
    </div>
</div>

Это мой сценарий

<script>
    $(document).ready(function() {
        $("#button").click(function() {
            displayPics();
        });
    });


    function displayPics() {

        var imagesArray = new Array();

        imagesArray = [
            "CM.jpg", "DC.jpg", "MG.jpg", "SW.jpg"
        ]

        var num = Math.floor(Math.random() * (imagesArray.length + 1));
        var img = imagesArray[num];

        $("picture").html("<img src='" + img + "' />")
    }

    window.onload = init;
</script>

Answer 1

Вашему коду требуется два исправления.

Исправление A: замените это:

var num = Math.floor(Math.random() * (imagesArray.length + 1));

на это:

var num = Math.floor(Math.random() * imagesArray.length);

Это необходимо, потому что в исходном коде ваше случайное число будет в диапазоне от 0 до 4 вместо желаемых от 0 до 3.

Исправление B: замените это:

$("picture").html("<img src='" + img + "' />")

При этом:

$("#picture").attr("src", img);

Это необходимо, потому что для выбора по идентификатору необходимо добавить #, а вам нужно изменить только src атрибута, поэтому использование attr - это путь.

Answer 2

$("picture").html("<img src='" + img + "' />");
$("#picture").attr('src',img);

вы потеряли HTML-селектор.