Jump to content

Store characters of input field into array?


matdemo159

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!

Link to comment
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?

 

Link to comment
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

Link to comment
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.

Link to comment
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
×
×
  • Create New...