從提示中獲取用戶輸入，搜索圖像數組並顯示用戶找到的圖像[javaScript]

Question

本質上，我試圖使用提示中的用戶輸入來搜索數組，並根據用戶搜索顯示圖像。

目前，我一直在嘗試這種方法，但是我不確定它是否正確。

我的html看起來像這樣：

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

我與按鈕進行交互的javascript看起來像這樣（非常混亂）：

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

結果應輸出到以下html元素中：

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

我的數組：

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"];

我知道這可能是搜索數組的一種非常低效的方法，但這是我能提出的更好的解決方案之一，盡管它不能完全起作用。

任何幫助，將不勝感激。

Answer 1

正如我在評論中寫道：
為了獲得一個數組項的值，您可以像這樣將其命名為array [indexofElementinArray]。 在您的示例中，您已經具有值ARRAYSEARCH，因此只需檢查它是否存在於數組中。 所以：

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