Jump to content
matdemo159

Store characters of input field into array?

Recommended Posts

Hello,

I'm a total novice to HTML and am currently working on a really basic page: The user inputs a name into a form, and then based on their input, the page displays a series of images. Each character of the name corresponds to a different image output.
i.e. the name "Joy" would output the image corresponding to J, the image for O, and the image for Y, in that order.

My initial idea for this was to store the value of each character of the name into an array, and then sequentially output the corresponding images.

However, I can't seem to find a way to store the input into an array, let alone one character at a time.

Any help would be much appreciated!

Share this post


Link to post
Share on other sites

Unclear of request.  Clarification please.

Are you wanting to display an image each letter of 'Joy' based upon user input?

Or, are you trying to display a symbol of each letter of 'Joy' based upon some substitution logic?

Or, are you wanting to display 'Joy' as a different font family or size or color?

Do you have an example of what you are trying to create?

 

Share this post


Link to post
Share on other sites
On 2/17/2020 at 8:25 PM, JMRKER said:

Unclear of request.  Clarification please.

Are you wanting to display an image each letter of 'Joy' based upon user input?

Or, are you trying to display a symbol of each letter of 'Joy' based upon some substitution logic?

Or, are you wanting to display 'Joy' as a different font family or size or color?

Do you have an example of what you are trying to create?

 

Hello, sorry for not replying sooner.

Here's an example of what I'm trying to achieve, though for this mockup I just manually styled each letter individually.

At some point I might want to use images, but for now simply coloring text will be enough.

The goal is for each letter to have its own color, for example "P" will always be red, every time it appears.
I want the user to be able to input their own string of characters, and then have the page give them the colored version of that same string.

What's the best way to go about achieving this? My first thought, as I said above, was to convert the string into an array of characters and then use that to print the result, but if there's a better method then I'm all for it!

exmaple.png

Share this post


Link to post
Share on other sites

I don't think you require an array, you just need to read each character,  you know what image file name will be i.e a.jpg, b.jpg etc, so you read each character at same time create an img tag with src of letter found with addition of '.jpg', and append where you want.

Share this post


Link to post
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.

Guest
Reply to this topic...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

Loading...

×
×
  • Create New...