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

Questions

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

March 9, 2022

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>

>Solution :

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>