I am trying to add the Strong element to the alert box in this scenario. However it is returning "undefined".
Can someone let me know where I have gone wrong with my syntax here. Thanks
$('.copyURL').click(function(e) {
e.preventDefault();
let ele = $(this).parent().siblings(':first-child').children();
let label = $(this).parent().parent().siblings(':first-child').children();
ele[0].select();
ele[0].setSelectionRange(0, 99999);
navigator.clipboard.writeText(ele[0].value);
alert(label[0].value + "\r\n" + "\r\n" +
"Copied: " + ele[0].value + "\r\n" + "\r\n" + "Use this link for your WEB site");
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div>
<label>
<strong>Copy This Strong Label Into Alert</strong>
</label>
<div class="row collapse">
<div class="columns small-7">
<input type="text" value="<#servername>/<#Database_Name>/<#business_business>/gift" readonly>
</div>
<div class="columns small-2">
<a class="button full-width" href="./<#business_business>/gift" target="_blank">View</a>
</div>
<div class="columns small-3">
<a class="button full-width secondary copyURL"><i class="far fa-clone"></i> Copy URL</a>
</div>
</div>
</div>
You need to use textContent to get the text from the strong element, not value:
$('.copyURL').click(function(e) {
e.preventDefault();
let ele = $(this).parent().siblings(':first-child').children();
let label = $(this).parent().parent().siblings(':first-child').children();
ele[0].select();
ele[0].setSelectionRange(0, 99999);
navigator.clipboard.writeText(ele[0].value);
alert(label[0].textContent + "\r\n" + "\r\n" +
"Copied: " + ele[0].value + "\r\n" + "\r\n" + "Use this link for your WEB site");
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div>
<label>
<strong>Copy This Strong Label Into Alert</strong>
</label>
<div class="row collapse">
<div class="columns small-7">
<input type="text" value="<#servername>/<#Database_Name>/<#business_business>/gift" readonly>
</div>
<div class="columns small-2">
<a class="button full-width" href="./<#business_business>/gift" target="_blank">View</a>
</div>
<div class="columns small-3">
<a class="button full-width secondary copyURL"><i class="far fa-clone"></i> Copy URL</a>
</div>
</div>
</div>