I am trying to get the value of the third <p> element by referring to the id of its parent (id="pickup-searchbox"), but first I'm referring to the class of the first chid (class="searchbox-info"), but the value is empty.
Here is the html code of the page I'm working with and my script.
<div class="searchbox-wrapper show-info" id="pickup-searchbox">
<div class="searchbox-inner-wrapper">
......
</div>
<div class="searchbox-info" tabindex="-1">
<p style="font-weight: 400; margin-bottom: 15px;" class="t-text">Пункт получения:</p><p class="t-text">На Станиславского</p>
<p class="t-text">Адрес: ул. Станиславского, 115А/1</p>
<p class="t-text" style="opacity: 0.6; line-height: 22px; font-size: .9rem;">По улице Станиславского, между пер. Крыловской и пер. Университетский</p>
<p class="t-text">Время работы: Пн-Пт 09:00-20:00, Сб-Вс 10:00-19:00</p>
<p class="t-text">Телефон: +78632631122</p><span style="border-bottom: 1px dashed #000; font-weight: 400; margin-top: 10px; display: inline-block; cursor: pointer;" class="t-text searchbox-change-pickup">Изменить</span>
</div>
</div>
My script:
<script>
$(document).ready(function(){
$('#allrecords').change(function() {
var address = $('#pickup-searchbox').children('.searchbox-info').find('p:nth-child(3)').val();
$('#input_1699283005593').val(address);
});
});
</script>
I tried accessing the element this way and expected to get the value of the element, but the script can't get it
.val()is used to get the value of form elements ´. Since you're trying to get the content of a<p>element, you should be using.text()instead..childrenonly looks in the immediate-children, not "all children" - change to$('#pickup-searchbox').find('.searchbox-info').find('p:nth-child(3)')or just$("#pickup-searchbox p:nth-child(3)")and not use .children/.find.val()- make sure you break down the issue - there's no point changing.val()to.text()if your selector is wrong (and, conversely, there's no point fixing the selector and still using.val()). You need to determine each issue in order - first, make sure your selector is working by checking it actually selects something - ievar element = $("#id").find("p:nth-child(3)"); console.log(element.length)- if your selector is wrong then .length will === 0 - so fix that first.