从提示中获取用户输入，搜索图像数组并显示用户找到的图像 [javaScript]]答案

【问题标题】：Taking user input from a prompt, searching an array of images and displaying the image the user has found [javaScript]]从提示中获取用户输入，搜索图像数组并显示用户找到的图像 [javaScript]]
【发布时间】：2017-12-15 18:15:15
【问题描述】：

本质上，我正在尝试使用提示中的用户输入来搜索数组，并根据用户搜索显示图像。

目前我一直在尝试这种方法，我确信它是正确的，虽然我不确定它是否诚实。

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

我知道这可能是搜索数组的一种非常低效的方法，但它是我能够想出的更好的解决方案之一，尽管它不太有效。

对此的任何帮助将不胜感激。

【问题讨论】：

你的阵列是什么样子的？ imageArray(ARRAYSEARCH) 是一个函数调用，你能发布你的函数 imageArray 吗？
刚刚在那里编辑，我的错
好的，为了获得一个数组项的值，你可以像这个数组[indexofElementinArray] 一样调用它。在您的示例中，您已经有了值 ARRAYSEARCH，因此您只需检查它是否存在于数组中
我放弃了让它可读的尝试——请点击<>并创建一个minimal reproducible example并去掉所有的华夫饼。与解释和问题无关的文字太多。保存前记得点击整理

标签： javascript html arrays prompt

【解决方案1】：

正如我在 cmets 中所写：
好的，为了获得一个数组项的值，你可以像这个数组 [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");
}
}

【讨论】：