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>
Advertisement
Answer
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>