jQuery append value on click and replace

Question

I'm trying to append the button text to the span but have it only show the value from the last clicked button under each .item.

So whatever the button text is that is clicked, append it to the span and have that value replaced by the next pressed button text, and so on.

$(".list").on("click", ".button", function() {
  var x = $(this).closest(".item");
  var y = $(".button").text();
  $('#value').append('(' + y + ')');
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="list">
  <div class="item">
    <div>Item 1</div>
    <button class="button">50</button>
  </div>
  <div class="item">
    <div>Item 2</div>
    <button class="button">30</button>
  </div>
  <div class="item">
    <div>Item 3</div>
    <button class="button">70</button>
  </div>
</div>
<span id="value">Total:</span>

justDan · Accepted Answer · 2018-08-06 19:24:00Z

3

I would structure your html a little like this and then target the span and update it using .text(). I used the <span> inside of the <p> tag like this because if you try and update the whole span tag, it'll also remove the total: text. I also trimmed up the jquery here a little bit by removing var x = $(this).closest(".item"); as we didn't need it in this case (not sure what that was in there for).

$('#value span').text(y);

$('.button').on('click', function() {
  var y = $(this).text();
  $('#value span').text(y);
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="list">
  <div class="item">
    <div>Item 1</div>
    <button class="button">50</button>
  </div>
  <div class="item">
    <div>Item 2</div>
    <button class="button">30</button>
  </div>
  <div class="item">
    <div>Item 3</div>
    <button class="button">70</button>
  </div>
</div>
<p id="value">Total: (<span>0</span>)</p>

edited Aug 6, 2018 at 19:24

answered Aug 6, 2018 at 19:12

justDan

2,3296 gold badges21 silver badges31 bronze badges

Sign up to request clarification or add additional context in comments.

9 Comments

Grizzly Over a year ago

In reference to the actual question.. what is the purpose of var x = $(this).closest(".item");?

justDan Over a year ago

@M12Bennett Ah good point. I'll update the answer to include little edits I did.

Grizzly Over a year ago

I'm just saying.. x is created but never used.. really the OP should answer that

justDan Over a year ago

I definitely agree there. I removed it for now to keep things clean.

Kyle Underhill Over a year ago

I was using the click function to find elements inside of each .item from the .list and return the contents. Example being: $("#title").text(t.find(".title").text()), finds the .title inside of the item, and returns the contents to #title on the click of .button

|

Ryan Gibbs · Accepted Answer · 2018-08-06 19:28:44Z

The Issue:

What you've asked jQuery to do is to append the text value of every object with a class of '.button', since all three buttons have that class, you're getting the text value of each button no matter which you click.

The Solution:

Use the 'this' keyword! In the context of a click listener, the 'this' keyword will refer to the control that fired the event. In other words, the control that was clicked. Now you will only be appending the value of one button with each click.

For Example:

$(".list").on("click", ".button", function () {
    var y = $(this).text();
    $('#value').append('(' + y + ')');
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
    <div class="list">
        <div class="item">
            <div>Item 1</div>
            <button class="button">50</button>
        </div>
        <div class="item">
            <div>Item 2</div>
            <button class="button">30</button>
        </div>
        <div class="item">
            <div>Item 3</div>
            <button class="button">70</button>
        </div>
    </div>
    <span id="value">Total:</span>

Hope that helps!

** -EDIT- **

To REPLACE the value with each click you'd want to use the .text() method to insert the value into the text property of the control. Since you currently have "Total" in there, you'd also need to insert that programatically, or like I did, move it outside your span element.

$(".list").on("click", ".button", function () {
    var y = $(this).text();
    // Use .text instead of .append.
    $('#value').text('(' + y + ')');
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
    <div class="list">
        <div class="item">
            <div>Item 1</div>
            <button class="button">50</button>
        </div>
        <div class="item">
            <div>Item 2</div>
            <button class="button">30</button>
        </div>
        <div class="item">
            <div>Item 3</div>
            <button class="button">70</button>
        </div>
    </div>
    <div>Total: <span id="value"></span></div>

Part of the question is also to remove the previous value once a new value has been clicked.

georgedum · Accepted Answer · 2018-08-06 19:16:42Z

0

Maybe just replace

$('#value').append('(' + y + ')');

with

$('#value').html('(Total:' + y + ')');

answered Aug 6, 2018 at 19:16

georgedum

5013 silver badges10 bronze badges

Collectives™ on Stack Overflow

jQuery append value on click and replace

3 Answers 3

9 Comments

1 Comment

Comments

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

9 Comments

1 Comment

Comments

Related