Javascript 单击以div向输入添加不同的值

如何根据客户端单击的金额将值添加到输入字段？对于每个金额不同的div，应在单击事件时将50、100200500值添加到输入字段。我尝试用纯js实现。在jquery上也可以

 <form>
 <div class="form-row">
   <label>Donate</label>
      <div class="doner-prices">50</div>
      <div class="doner-prices">100</div>
      <div class="doner-prices">200</div>
      <div class="doner-prices">500kr</div>
  </div>
 <fieldset class="form-row">
    <div class="form-col doner-price">
       <label for="donate-price">
         eller angiv dit eget
        <input type="text" id="donate-price" name="name"   pattern="\d+" value="" required>

        </label>
    </div>
    </fieldset>
   </form>   

   document.addEventListener("DOMContentLoaded", function () {
var amount_list = document.querySelectorAll('.form-row .doner-      prices'); //node-list
var amount_array = [].slice.call(document.querySelectorAll(".form-row   .doner-prices")); //node-list to array
var donerForm = document.getElementById('doner-hidden');
var inputDonateField = document.getElementById('donate-price');
var inputNumber = /^[0-9]+$/;
var onClickFormVisible = function () {
    donerForm.style.display = "block";
};
var onInputTypeNumber = function () {
    if (inputNumber.test(inputDonateField.value)) {
        donerForm.style.display = "block";
    } else {
        return false;
    }
};
//onclick event for each amount images
var amoutn_array = amount_array.map(function (e) {
    return e.addEventListener('click', onClickFormVisible, false);
});
//input event only if value === number
inputDonateField.addEventListener("keyup", onInputTypeNumber, false);
});

捐赠
50
100
200
500kr
埃勒·安吉夫·迪特
document.addEventListener（“DOMContentLoaded”，函数（）{
var amount_list=document.querySelectorAll（'.form row.doner-prices'）；//节点列表
var amount_array=[].slice.call（document.queryselectoral（“.form row.doner prices”）；//节点列表到数组
var donerForm=document.getElementById（'doner-hidden'）；
var inputDonateField=document.getElementById（'donate-price'）；
变量inputNumber=/^[0-9]+$/；
var onClickFormVisible=函数（）{
donerForm.style.display=“块”；
};
var onInputTypeNumber=函数（）{
if（inputNumber.test（inputDonateField.value））{
donerForm.style.display=“块”；
}否则{
返回false；
}
};
//每个金额图像的onclick事件
var amoutn\u array=amount\u array.map（函数（e）{
返回e.addEventListener（'click'，onClickFormVisible，false）；
});
//仅当值===number时输入事件
inputDonateField.addEventListener（“键控”，onInputTypeNumber，false）；
});

请使用以下代码来满足您的要求

$（“.doner prices”）。单击（函数（）{
$（“#捐赠价格”）.val（$（this.attr（“数据金额”））；
});

捐赠
50
100
200
500kr
埃勒·安吉夫·迪特
请使用以下代码来满足您的要求


$（“.doner prices”）。单击（函数（）{
$（“#捐赠价格”）.val（$（this.attr（“数据金额”））；
});

捐赠
50
100
200
500kr
埃勒·安吉夫·迪特
我可以将其与数据一起使用吗？例如data amount=“50”？可以！！我已经更新了我的答案。如果您同意我的回答，请将其标记为答案。这也是可行的，有什么区别吗？var onClickAmountFormVisible=function（）{$（inputDonateField）.val（$（this.data（'amount'）；donPerform.style.display=“block”；）；使用.data或.attr我可以在div内使用data-atribute吗，例如data amount=“50”？是的，您可以！！我已经更新了我的答案。如果您同意我的回答，请将其标记为答案。这也是可行的，有什么区别吗？var onClickAmountFormVisible=function（）{$（inputDonateField）.val（$（this.data（'amount'）；donPerform.style.display=“block”；）；使用.data或.attr