Question

I am trying to find out good solution to the issue I have at the moment, I am tryign to improve my understanding of javascript atm.

My problem is trying to produce series of images that is directly produce from what the users have input into the textbox.

For example If I put in “Hello” into textbox, I want to produce 5 images in row into div of display particular way of how to fingerspell “Hello” but need to know how to seperate each character and produce image that is direct relate to each character individual.

Then it would be produce into div contain 5 seperate images placed together and shown.

Help would be appreciate!

Answer 1

Simply wire up a .change() and then you can use $.each() to iterate through each character in the string and than call .append() to add in your <img/> <div/> or other elements.

$("#spell").change(function(){
    var $o = $("#output").empty();
    $.each($(this).val(), function(i, c){
        $o.append("<img src='http://dummyimage.com/50x50/000/fff&text=" + c + "'/>");
    });
});

Code example on jsfiddle

If you want this to occur while they type you could use .keyup()