Taking user input from a prompt, searching an array of images and displaying the image the user has found [javaScript]]

Question

Essentially, I am trying to search an array with user input from a prompt, and display an image based off of the users search.

Currently I have been trying this method and I'm sure it is correct, although I am unsure if it is honestly.

My html looks like this:

        <label>Specific slide</label>
        <button id="submit" onclick="specificSLIDE()">enter a specific slide</button>

My javascript which interacts with the button looks like this (very messy):

function specificSLIDE(){

var ImageSearch = prompt("Enter a specific slide you would like to view", "<slide goes here>");
var ARRAYSEARCH = "../Clientside/Sampledata/Single Page Architecture (SPA)/Slide"+ImageSearch+".jpg";
if(ImageSearch!= null){
//        document.getElementById("slide").innerHTML = imageArray.find(ImageSearch);
   // document.getElementById("slide").innerHTML = imageArray.find(ARRAYSEARCH);
    document.getElementById("slide").innerHTML = '<img src='+imageArray(ARRAYSEARCH)+'id="slide">';
    console.log(ImageSearch);
}else{
    prompt("PLEASE ENTER A VALUE");
}
}

the result should output into this html element:

imgStart[0].innerHTML = '<img  src="../Clientside/Sampledata/Single Page Architecture (SPA)/Slide1.jpg" id = "slide">';

my array:

var c = 0,imageArray = ["../Clientside/Sampledata/Single Page Architecture (SPA)/Slide1.jpg", "../Clientside/Sampledata/Single Page Architecture (SPA)/Slide2.jpg", "../Clientside/Sampledata/Single Page Architecture (SPA)/Slide3.jpg", "../Clientside/Sampledata/Single Page Architecture (SPA)/Slide4.jpg", "../Clientside/Sampledata/Single Page Architecture (SPA)/Slide5.jpg", "../Clientside/Sampledata/Single Page Architecture (SPA)/Slide6.jpg", "../Clientside/Sampledata/Single Page Architecture (SPA)/Slide7.jpg", "../Clientside/Sampledata/Single Page Architecture (SPA)/Slide8.jpg", "../Clientside/Sampledata/Single Page Architecture (SPA)/Slide9.jpg", "../Clientside/Sampledata/Single Page Architecture (SPA)/Slide10.jpg", "../Clientside/Sampledata/Single Page Architecture (SPA)/Slide11.jpg"];

I'm aware this is probably a really inefficient way of searching the array but it was one of the better solutions I was able to come up with although it doesn't quite work.

Any help with this would be appreciated.

Answer 1

As I wrote in the comments:
ok in order to have a value of an array item you call it like this array[indexofElementinArray]. In your example you already have the value ARRAYSEARCH, so you only have to check if it exists in the array. So:

function specificSLIDE(){

var ImageSearch = prompt("Enter a specific slide you would like to view", "<slide goes here>");
var ARRAYSEARCH = "../Clientside/Sampledata/Single Page Architecture (SPA)/Slide"+ImageSearch+".jpg";
if(ImageSearch && imageArray.indexOf(ARRAYSEARCH)!== -1){
//        document.getElementById("slide").innerHTML = imageArray.find(ImageSearch);
   // document.getElementById("slide").innerHTML = imageArray.find(ARRAYSEARCH);
    document.getElementById("slide").innerHTML = '<img src='+ARRAYSEARCH+'id="slide">';
    console.log(ImageSearch);
}else{
    prompt("PLEASE ENTER A VALUE");
}
}