Javascript onclick image display alt-tag в поле ввода

Question

У меня возник вопрос о событии onclick с изображением. У меня есть четыре изображения, которые являются продуктами с ценой. Цена указана в теге Alt (для простоты всего 100 сейчас). Смотрите ниже HTML:

<img src="product1.png" alt="100" onclick="pricecheck();" id="product1" /> 
<img src="product2.png" alt="100" onclick="pricecheck();" id="product2" /> 
<img src="product3.png" alt="100" onclick="pricecheck();" id="product3" /> 
<img src="product4.png" alt="100" onclick="pricecheck();" id="product4" /> <br /> 

<label for="Price" >Price:</label><input type="text" name="price"/><br />    
<label for="totaal">Total:</label><input type="text" name="total"/> 

Я просто не знаю, как сделать функцию, которая будет показывать альт-теги в поле ввода «цена» при нажатии на изображение. вход «total» должен показывать общую стоимость всех изображений (продуктов), на которые были нажаты.

Надеюсь, вы, ребята, могли бы помочь мне с этим.

Приветствие

Answer 1

Использование JQuery, редактировать HTML стать (добавление параметра 'ID'):

<img src="product1.png" alt="100" onclick="pricecheck(1);" id="product1" /> 
<img src="product2.png" alt="100" onclick="pricecheck(2);" id="product2" /> 

вашей функция JQuery:

function pricecheck(id){ 
    $('input[name="price"]').val($('img#product' + id).attr('alt')); 
} 

с использованием чистого JavaScript.

редактировать первый ваш вход тег: <input type="text" name="price" id="price" />

function pricecheck(id){ 
    var img = document.getElementById('product' + id); 
    document.getElementById('price').value = img.getAttribute("alt"); 
}