get value with data attribute and display on other div

Question

I would like to show the value "1,000 below" found inside the button on this div using jquery

<div class="showvaluehere">here</div>

<button class="button" data-filter=".1000">1,000 below</button>

I got this so far but not working, it shows the class ".1000"

var syo = $this.attr('data-filter');
$(this).parent().find('.showvaluehere').html(syo);

for clarity, I want the value of the button to be on the

so that it shows like this;

<div class="showvaluehere">1,000 below</div>

Thanks

Answer 1

You are getting value of data-filter attribute, which is .1000

Try this

   $('.button').click(function() {
      var syo = $(this).text();
      $('.showvaluehere').html(syo);
    })

Answer 2

Your code is confusing as you're referencing a lot of elements and attributes which seem unrelated to the HTML you've shown and the problem you describe.

That said, you can do what you require by simply setting the text() of the .showvaluehere element to match that of it's neighbouring button , like this:

 $('.showvaluehere').text(function() { return $(this).next('button').text(); });

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <div class="showvaluehere">here</div> <button class="button" data-filter=".1000">1,000 below</button>

Answer 3

 $('.button').click(function() { $('.showvaluehere').text($(this).text()) })

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <div class="showvaluehere">here</div> <button class="button" data-filter=".1000">1,000 below</button>