Skip to content
Advertisement

On element click get text of a child element and pass it in an input field using jquery or plain javascript

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>

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