Динамическое заполнение текстового поля на JS
Есть следующая задача:
Несколько одинаковых картинок расположены подряд, а после них текстовое поле. Надо, чтобы по щелчку на первой картинке в текстовое поле вписывалась цифра 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>
Заранее спасибо!
|