在按钮上单击，将div内部html分配给输入字段值

Question

What I want is when someone click on button, set the phone number to input value. The block is a loop in which different email and phone number appears. if some one click in a specific block get the phone number from that block only. Thanks.

<div class="block">
     <div class="phone"><span>+1234567</span></div>
     <div class="email">
          <span>email@email.com</span>
          <button>CLick</button>
     </div>
</div>

<div class="block">
     <div class="phone"><span>+7696686</span></div>
     <div class="email">
          <span>another@email.com</span>
          <button>CLick</button>
     </div>
</div>

<div class="block">
     <div class="phone"><span>+897979877</span></div>
     <div class="email">
          <span>email2@email.com</span>
          <button>CLick</button>
     </div>
</div>
<input type="text" value="" id="phone">

Here is my code:

jQuery(document).ready(function() {
    jQuery(".block button").click(function() {
        var contents = jQuery(this).find(".phone span").text();
        jQuery("#phone").val(contents);
    });
});

Answer 1

You tagged jQuery so I'm assuming it's ok for you to receive an answer using jQuery. Try something similar to:

$('button').click(function(){
   var phoneNumber = $(this).closest('.phone').find('span').text();
});

Answer 2

Try this-

 jQuery(document).ready(function($) { $(".block").each(function() { $(this).find('button').click(function(){ var contents = $(this).parents('.block').find('.phone span').text(); $("#phone").val(contents); }); }); }); 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <div class="block"> <div class="phone"><span>+1234567</span></div> <div class="email"> <span>email@email.com</span> <button>CLick</button> </div> </div> <div class="block"> <div class="phone"><span>+7696686</span></div> <div class="email"> <span>another@email.com</span> <button>CLick</button> </div> </div> <div class="block"> <div class="phone"><span>+897979877</span></div> <div class="email"> <span>email2@email.com</span> <button>CLick</button> </div> </div> <input type="text" value="" id="phone">