Check if user input is equal to a array value

Question

I have some code that compares the user input to a value in an array. If the user input match, i want to display an img equal to the input value.

Like this: User inputs the letter A, A is equal to letters[0], so display the img A.png.

Been trying for a while, but cant seem to get it to work? Do i need to use an associative array

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

letters is an array of type string, so letters[x] will return a string. So when you set it to src, it will never get the file as you are not passing a src. — Rajesh Dixit
– Rajesh Dixit, Commented Oct 6, 2017 at 11:00
In your // Array containing a img equal to the letter you're reassigning values of letters array, note that your letters[0] will be img/A.png. Is that really what you want? — Walk
– Walk, Commented Oct 6, 2017 at 11:02
You also have two "A" in your letters array, that's why even though you're rewriting your first instance of "A" (as stated in my previous comment) it still finds the second one — Walk
– Walk, Commented Oct 6, 2017 at 11:06

Deepu Reghunath · Accepted Answer · 2017-10-06 11:44:05Z

1

You can use an array of Object in wich you save each letter and associated image:

$( "#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">

edited Oct 6, 2017 at 11:44

Deepu Reghunath

10.1k2 gold badges42 silver badges48 bronze badges

answered Oct 6, 2017 at 11:10

Faly

13.4k2 gold badges21 silver badges39 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

prabhatojha · Accepted Answer · 2017-10-06 11:19:56Z

0

You can simply build your array this way.

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

answered Oct 6, 2017 at 11:19

prabhatojha

2,1051 gold badge18 silver badges32 bronze badges

Comments

Andy · Accepted Answer · 2017-10-06 11:42:03Z

0

If there's a 1-1 correlation between input and filename, you can do away with all the loops and arrays. Simply check to see if the input is between A and Z, and if it is, add the image source using that input.

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

answered Oct 6, 2017 at 11:42

Andy

63.6k13 gold badges72 silver badges99 bronze badges

Collectives™ on Stack Overflow

Check if user input is equal to a array value

3 Answers 3

Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related