Random image function (javaScript) not displaying local image when prompted

Vote count: 0

So I've tried several things to fix this but nothing seems to work. it was working OKAY earlier but something happened and now I cant get it to display a random image from a JS array in the target div.

• renamed all the image files so they had no spaces
• edited document.getElementById("profPic").innerHTML = ''; several times to no avail
• Checked SO for solutions/work around but concluded it must be something to do with the file formatting that i am unaware of.
• Tried putting displayImage(); in the div container. Also tried with document.write

JS

var imagesArray = ["img/mascotImages/CCF2_(281).jpg", "img/mascotImages/CCF2_(282).jpg"];

function displayImage(){

    var num = Math.floor(Math.random()  * (imagesArray.length+1));
    document.getElementById("profPic").innerHTML = '';
}

function myFunction(e) {
    if((e.target.id === 'mySearch' && e.keyCode === 13) || e.target.id === 'searchButton'){
        e.preventDefault();
        var searchValue = document.getElementById("mySearch").value;
        for(var i = 0; i < users.length; i++){
        if(users[i]['last_name'] === searchValue){
        document.getElementById("usernameOut").innerHTML = (users[i].username);
        document.getElementById("firstNameOut").innerHTML = (users[i].first_name);
        displayImage();
        return;
       }
    }
  }
}

HTML

What is supposed to happen is that when the user searches something in a search box, data from another array is displayed in

and

etc. I wanted a random picture to display also when the user clicked search/hit enter.

Is something wrong with the naming conventions of the files? are they in one too many folders? i'm sure this is something very simple, but it's had me staring at it for several hours.

javascripthtml

Let's block ads! (Why?)

Random image function (javaScript) not displaying local image when prompted