Create 3 images based of the users surname

I'd like to change the name that the user enters into a 3 digit number(000-999), then display 3 images based of the numbers given. If the number made is 015, then the first image displayed would be 000.jpg, the second 010.jpg and the third would be 005.jpg. Id like the same result each time a name is entered and I'd like to update on real time if possible. I hope this helps clear things up, I'm still trying to figure out the best way. Thanks

The aim is to create an illustration comprised of 3 images that combine together, mix and match style.

Heres what i have so far: [http://ift.tt/1gT4fdS]

Ideally id like the user to input their name and the images to change to the respective numbers.

function doSomeStuff() {

document.getElementById("LastName").text = "Connor"; // Simulate User Input
var lastName = document.getElementById("LastName").text;
var myPics = document.getElementById("myPics");

var sum = 0;
for(var i=0; i<lastName.length;i++)
{
sum += lastName.charCodeAt(i);
}

sum = (sum%1000);
var firstPic = (sum + "").split('')[0] + "00.jpg";
var secondPic = "0" + (sum + "").split('')[1] + "0.jpg";
var thirdPic = "00" + (sum + "").split('')[2] + ".jpg";

var imgToAdd1 = document.createElement("img");
imgToAdd1.src = firstPic;
imgToAdd1.alt = firstPic;
myPics.appendChild(imgToAdd1);

var imgToAdd2 = document.createElement("img");
imgToAdd2.src = secondPic;
imgToAdd2.alt = secondPic;
myPics.appendChild(imgToAdd2);

var imgToAdd3 = document.createElement("img");
imgToAdd3.src = thirdPic;
imgToAdd3.alt = thirdPic;
myPics.appendChild(imgToAdd3);
}

doSomeStuff();