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

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/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet" />

<div >
  <div >10</div>
</div>

<div >
  <div >20</div>
</div>

<div >
  <div >40</div>
</div>

<div >
  <div >80</div>
</div>

<div >
  <input type="number" id="amountInput"  placeholder="Amount of credits">
</div>

CodePudding user response：

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/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet" />



<div >
  <div >10</div>
</div>

<div >
  <div >20</div>
</div>

<div >
  <div >40</div>
</div>

<div >
  <div >80</div>
</div>

<div >
  <input type="number" id="amountInput"  placeholder="Amount of credits">
</div>

CodePudding user response：

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/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet" />



<div >
  <div >10</div>
</div>

<div >
  <div >20</div>
</div>

<div >
  <div >40</div>
</div>

<div >
  <div >80</div>
</div>

<div >
  <input type="number" id="amountInput"  placeholder="Amount of credits">
</div>