檢查用戶輸入是否等於數組值

我有一些代碼將用戶輸入與數組中的值進行比較。如果用戶輸入匹配，我想顯示一個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

檢查用戶輸入是否等於數組值

回答

相關問題