Динамическое заполнение текстового поля
 

Есть следующая задача:
Несколько одинаковых картинок расположены подряд, а после них текстовое поле. Надо, чтобы по щелчку на первой картинке в текстовое поле вписывалась цифра 1, по щелчку на второй картинке в текстовое поле вписывалась цифра 2 и т.д. до 5. Сама выбранная картинка должна при выборе изменять цвет (заменяться на другую?).
Решение должно быть реализовано на чистом JS, о котором я имею представление на уровне "JavaScript существует". Помогите, пожалуйста!
Я даже не знаю, как корректно сформулировать запрос в поисковике - он мне все время выдает динамическое создание полей. Но здесь поле уже есть, его надо просто заполнять автоматически в зависимости от выбранной картинки.
Вот html-код:
<div class="buttons">
<img src="but.png" width="18" height="49" alt="1" id="one">
<img src="but.png" width="18" height="49" alt="2" id="two">
<img src="but.png" width="18" height="49" alt="3" id="three">
<img src="but.png" width="18" height="49" alt="4" id="four">
<img src="but.png" width="18" height="49" alt="5" id="five">
</div>
<div class="total">
<input type="text" name="total" id="total">
<label for="total">Total</label>
</div>

Заранее спасибо!

Во первых задача тебе на день даже с нуля. Всего то определиться с порядком.
1 Узнать как получить какой либо элемент (div,img и тд) http://learn.javascript.ru/dom
2 Узнать как "навесить" на нужные элменты(в твоем случае клик) событие http://learn.javascript.ru/introduction-browser-events
3 узнать как получить значение элемента
4 узнать как установить значение элементу (инпуту и img)

Все это гуглится и получается много-много ответов с примерами.