Появление одного из нескольких изображений в зависимости от выпавшего числа

Есть JS скрипт, который получает рандомное число и в зависимости от выпавшего числа выводит картинку в блок.

HTML код:

<div id="block">
    <a href="#"><img id="pic1" src="pic1.jpg"></a>
    <a href="#"><img id="pic2" src="pic2.jpg"></a>
    <a href="#"><img id="pic3" src="pic3.jpg"></a>
</div>

JS код:

<script type="text/javascript">
    var i = Math.random();
    i = 3 * i;
    i = Math.floor(i);

    console.log(i);

        if (i==1) {
            document.getElementById("pic1").style.display = 'block';
        }
        else if(i==2){
            document.getElementById("pic2").style.display = 'block';
        }
        else if(i==3){
            document.getElementById("pic3").style.display = 'block';
        }
        else{
            document.getElementById("pic3").style.display = 'block';            
}

</script>

CSS код:

#pic1{
margin: 0 auto;
width: 300px;
height: 200px;
display: none;

}

#pic2{
margin: 0 auto;
width: 300px;
height: 200px;
display: none;

}

#pic3{
margin: 0 auto;
width: 300px;
height: 200px;
display: none;

}

При запуске кода, в консоли браузера выводится ошибка - Uncaught TypeError: Cannot read property 'style' of null.

В чем заключается и как решить данную проблему?