Can't Get Jquery .Show to Execute More Than One Time

Get Help jQuery
#1

Hi all!

I’ve got a project I’m trying to create, where each time a key is pressed it shows an image for that letter.

For example, I press the letter “A” on my keyboard, and that shows an image of an “A” on my screen each time the key is pressed.

I found some code to do that, but I don’t know how to get a function like .show to fire more than once. I guess that wouldn’t really be possible come to think of it.

I know Jquery and Javacript a bit, but I’m still fairly new with those languages.

Does anyone have any suggestions on how I could go about this? The goal is to be able to show the images as they are typed, but also be able to delete them from the screen as the user deletes a letter from the input field.

I’m trying to replicate something like this…

This is the code I’m playing around with…

#2

Hello, and welcome to the forums!

Instead of adding events for key presses and trying to manage backspaces, etc., what if you instead attach to the change event of the input box?

In that event handler, you could set the classes for each letter with a default of a class that doesn’t show anything. Maybe there would be a pre-determined number of elements already on the page ready to become letters. (That site you linked limits it to 15)
e.g.

<div id="letter-0" class="no-letter"></div>
<div id="letter-1" class="no-letter"></div>
...
<div id="letter-13" class="no-letter"></div>
<div id="letter-14" class="no-letter"></div>

Maybe the class “no-letter” could be styled to have a display of none so the element doesn’t take up space unless it’s changed to a different class. The change event handler that you write could iterate through each letter and set the class to either a letter or remove the letter:
e.g.

$('#letter-0').attr('class', 'letter-a');
// or to remove the letter
$('#yourIdSelector').attr('class', 'no-letter');

You’d dynamically create the strings for the selector and class name by using the index value of the letter you’re currently on in the loop. I gave an example setting the class like that and not the usual addClass(), removeClass(), or toggleClass() so the current class would be replaced completely.

That site limits it to 15 characters, but you could do whatever amount you want or add them dynamically if you’re feeling up to it.

Just throwing out ideas for one possible solution to help you get the ball rolling. Good luck on your project.

#4

Thank you Selectall!

That does look like a better solution, but how would I show the letter based on which key they pressed?

I’m playing around with this new code…

#5

You wouldn’t need to worry about what key is pressed. If the change handler function is called, then you’d iterate over the current value of the input box. You’d go letter by letter in order to set the classes of the divs for that letter.

For example, let’s say the input box contained 4 characters: asks when the change handler was called. You could create a loop to go through the string 1 character at a time.

The first character would have an index of 0 and be the letter a, so you’d set the class of #letter-0 to letter-a, using the example code I mentioned last time.

The second character is index 1, value of s. #letter-1 would be class letter-s

Third is index 2, value of k, so #letter-2 would be set to the class letter-k

You get the idea. You’d have to have divs (and the CSS) already prepared.

This is just one possible implementation.

#6

That makes more sense. I guess I need to do a bit of research to understand how to go about iterating over the value of the input box.

Do you have any suggestions on some articles to check out to learn more about this? Or modules of Codecademy lessons to check out?

#7

If you have the time, then I’d definitely suggest going through the full JavaScript course even if you already know some of it, though it sounds like you’re just trying to focus on this project right now.

If you’re just trying to dive head first, then probably the usual sources: Google, StackOverflow, documentation, and a lot of experimentation.

For example, first you’d want to be able to get the value of your input box (the string value) from within the change handler. So you could search “jquery get value of input box” in Google and be bought to jQuery’s .val() documentation with examples

Next you’d want to be able to process the string character by character. Searching for “JavaScript iterate string” will take you to a StackOverflow post with many different ways

Then you’d want to be able to do string concatenation so you can build the strings like #letter-1, #letter-2, letter-a, letter-b. You mentioned knowing some JavaScript already, so you may have that covered, but if not, same ideas as the previous.

Break down each step of what you’re trying to do and use keywords you pick up on along the way to hone in on the results you need.

Once you are done with the urgency of your project, definitely take some of the courses here, especially if this project was something you enjoyed working on.