As per title in my code below I have 4 divs that contains 4 different numbers. What i want is when i click on each div the amount of the clicked div to be inserted at the input field. My problem is that when i click any of the divs it pass all the amounts in the input field. Here is my code:
$(".btn-amount").each(function() {
$(this).click(function() {
var btnCreditsAmount = $(".hero-text").text();
$('#amountInput').val(btnCreditsAmount);
});
});.btn-amount {
min-width: 80px;
text-align: center;
padding: 0.5rem;
border: 1px solid #ccc;
float: left;
margin: 5px;
border-radius: 6px;
cursor: pointer;
font-weight: bold;
background: #f2f4f8;
}
.form-group {
display: block;
clear: both;
width: 360px;
overflow: hidden;
position: relative;
}
.input-field {
width: 100%;
}<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.2.4/jquery.min.js"></script>
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/css/bootstrap.min.css" rel="stylesheet" />
<div class="btn-amount">
<div class="hero-text">10</div>
</div>
<div class="btn-amount">
<div class="hero-text">20</div>
</div>
<div class="btn-amount">
<div class="hero-text">40</div>
</div>
<div class="btn-amount">
<div class="hero-text">80</div>
</div>
<div class="form-group">
<input type="number" id="amountInput" class="input-field" placeholder="Amount of credits">
</div>You dont need .each loop, You can just attach click handler on each .btn-amount and find the .hero-text and insert into the Inputbox.
$(this).find(".hero-text").text(); will give the amount of the clicked button. So your click handler should look like this
$(".btn-amount").click(function() {
var btnCreditsAmount = $(this).find(".hero-text").text();
$('#amountInput').val(btnCreditsAmount);
});
Working Code below
$(".btn-amount").click(function() {
var btnCreditsAmount = $(this).find(".hero-text").text();
$('#amountInput').val(btnCreditsAmount);
});.btn-amount {
min-width: 80px;
text-align: center;
padding: 0.5rem;
border: 1px solid #ccc;
float: left;
margin: 5px;
border-radius: 6px;
cursor: pointer;
font-weight: bold;
background: #f2f4f8;
}
.form-group {
display: block;
clear: both;
width: 360px;
overflow: hidden;
position: relative;
}
.input-field {
width: 100%;
}<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.2.4/jquery.min.js"></script>
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/css/bootstrap.min.css" rel="stylesheet" />
<div class="btn-amount">
<div class="hero-text">10</div>
</div>
<div class="btn-amount">
<div class="hero-text">20</div>
</div>
<div class="btn-amount">
<div class="hero-text">40</div>
</div>
<div class="btn-amount">
<div class="hero-text">80</div>
</div>
<div class="form-group">
<input type="number" id="amountInput" class="input-field" placeholder="Amount of credits">
</div>Your line
$(".hero-text")
will select all hero-text elements. You need to limit to the one being clicked.
In the event handler, when using function() {, this is the element that was clicked.
So that line would become $(this).text() - however, when using .text() it includes all the whitespace so will give an error if your html has any sort of layout (as it will likely start with \n and thus fail when passing to .val)
Instead, use
var btnCreditsAmount = this.innerText;
Updated snippet:
$(".btn-amount").each(function() {
$(this).click(function() {
var btnCreditsAmount = this.innerText;
$('#amountInput').val(btnCreditsAmount);
});
});.btn-amount {
min-width: 80px;
text-align: center;
padding: 0.5rem;
border: 1px solid #ccc;
float: left;
margin: 5px;
border-radius: 6px;
cursor: pointer;
font-weight: bold;
background: #f2f4f8;
}
.form-group {
display: block;
clear: both;
width: 360px;
overflow: hidden;
position: relative;
}
.input-field {
width: 100%;
}<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.2.4/jquery.min.js"></script>
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/css/bootstrap.min.css" rel="stylesheet" />
<div class="btn-amount">
<div class="hero-text">10</div>
</div>
<div class="btn-amount">
<div class="hero-text">20</div>
</div>
<div class="btn-amount">
<div class="hero-text">40</div>
</div>
<div class="btn-amount">
<div class="hero-text">80</div>
</div>
<div class="form-group">
<input type="number" id="amountInput" class="input-field" placeholder="Amount of credits">
</div>