检查用户输入是否等于数组值

我有一些代码将用户输入与数组中的值进行比较。如果用户输入匹配，我想显示一个img等于输入值。检查用户输入是否等于数组值

像这样：用户输入字母A，A等于字母[0]，所以显示img A.png。

已经尝试了一段时间，但似乎无法得到它的工作？我是否需要使用关联数组

window.onload = btn; 
 

 
function btn() { 
 
    document.getElementById("btn").onclick = generateLetters; 
 
} 
 

 
// Array containing every letter in the alphabet 
 
var letters = ["A", "B", "C", "D", "A", "F", "G", "H", "I", "J", "K", "L", "M", "N", "O", "P", "Q", "R", "S", "T", "U", "V", "W", "X", "Y", "Z", "Æ", "Ø", "Å"]; 
 

 
// Array containing a img equal to the letter 
 
var letterImages = [letters[0] = "img/A.png", letters[1] = "img/B.png", letters[2] = "img/C.png", letters[3] = "img/D.png"]; 
 

 
function generateLetters() { 
 

 
    // Get user input and convert to upper case to match array value 
 
    var input = document.getElementById("input").value.toUpperCase(); 
 
    // Loops through letterImages array 
 
    for (var x = 0; x < letterImages.length - 1; x++) 
 

 
    // Loops through letters array 
 
    for (var i = 0; i < letters.length; i++) 
 
     // Check if input is equal to a value inside letters array 
 
     if (letters.indexOf(input) > -1) { 
 
     // Show img equal to input value 
 
     document.getElementById("img").src = letters[x]; 
 
     } 
 
}

<input id="input" type="text"> 
 
<button id="btn" type="button">Generate Letter</button> 
 
<p id="print"></p> 
 
<img id="img" height="50px" width="50px">

来源

2017-10-06 Sander Hellesø

'letters'是一个字符串类型的数组，所以'letters [x]'将返回一个字符串。所以当你把它设置为src时，它将永远不会得到文件，因为你没有传递一个src。 – Rajesh

在包含一个img等于该字母的数组中，您将重新分配'letters'数组的值，请注意您的'letters [0]'将是'img/A.png'。那真的是你想要的吗？ – Walk

你在'letters'数组中还有两个''A''，这就是为什么即使你正在重写你的第一个“A”实例（如我之前的评论中所述），它仍然会找到第二个 – Walk

可以在至极使用对象的数组保存每个字母和相关图像：

$("#btn").click(function() { 
 
    var letters = [ 
 
    { letter: "A", img: "https://dummyimage.com/600x400/000/fff&text=One" }, 
 
    { letter: "B", img: "https://dummyimage.com/600x400/874787/0011ff&text=Two" }, 
 
    { letter: "C", img: "https://dummyimage.com/600x400/a697a6/6569ab&text=Three" } 
 
]; 
 

 
// Get user input and convert to upper case to match array value 
 
var input = document.getElementById("input").value.toUpperCase(); 
 

 
var found = letters.find(l => l.letter === input); 
 

 
if (found) { 
 
    document.getElementById("img").src = found.img; 
 
} 
 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<input id="input" type="text"> 
 
<button id="btn" type="button" click="displayimg();">Generate Letter</button> 
 
<p id="print"></p> 
 
<img id="img" height="50px" width="50px">

来源

2017-10-06 11:10:13 Faly

你可以简单地用这种方式构建你的数组。

var letterImages = [{"a": "img/A.png"}, {"b":"img/B.png"}, 
{"c": "img/C.png"}, {"d":"img/D.png"}]; 

function generateLetters() { 

    // Get user input and convert to upper case to match array value 
    var input = document.getElementById("input").value.toUpperCase(); 
    var item = letterImages.find((item) => item[input]) 

    if (item) { 
    // Show img equal to input value 
    document.getElementById("img").src = item[input]; 
    } 
}

来源

2017-10-06 11:19:56 Deshak9

如果有输入和文件名之间的关联1-1，你可以与所有的循环和数组做掉。只需检查输入是否在A和Z之间，如果是，则使用该输入添加图像源。

if (/[A-Z]/.test(input)) { 
    document.getElementById("img").src = `img/${input}.png`; 
}

来源

2017-10-06 11:42:03 Andy

检查用户输入是否等于数组值

回答

相关问题