document.getElementById('------').value show undefined

Question

晚上好。我正在进行一个基于家庭的项目，并学习Laravel和编码。

在这里，我试图在ajax中获取Card头值，以传递控制器并从中获取数据。

显示循环中月份名称的表头。

这是代码

@foreach ($totalmilkselldataforyeartotable as $item)
<div class="col-md-4 col-sm-6 col-lg-2">
<div class="card border-success " style="width: 12rem;">
<div class="card-header">
<span id="monthnameforcard"> <strong>{{ $item['monthname'] }}</strong>  </span> 
</div>
<ul class="list-group list-group-flush">
<li class="list-group-item">Total Milk - &nbsp;<strong>{{ $item['totalmilk'] }}</strong></li>

</ul>
<button type="button" class="btn btn-link">
<span id="getmonthmilkdetails" class='glyphicon glyphicon'> More <i class="fas fa-arrow-circle-right"></i> </span>
</button>
</div>
</div>
@endforeach

Ajax的代码。

$(document).on('click', '#getmonthmilkdetails', function() {
var getmonthnameforajax = document.getElementById('monthnameforcard').value; 
alert(getmonthnameforajax);
$.ajax({
type: 'post',
url: '/getmonthmilkdetails',
data: {
'_token'            : $('input[name=_token]').val(),
'monthname'         : getmonthnameforajax,
},
success: function(data) {

}
});

});

显示"；未定义的"；

感谢的帮助

Answer 1

我建议您使用class而不是id，并使用closest来获得具有card类的父元素，然后使用querySelector来获取具有monthnameforcard类的元素

@foreach ($totalmilkselldataforyeartotable as $item)
<div class="col-md-4 col-sm-6 col-lg-2">
<div class="card border-success " style="width: 12rem;">
<div class="card-header">
<span class="monthnameforcard"> <strong>{{ $item['monthname'] }}</strong>  </span> 
</div>
<ul class="list-group list-group-flush">
<li class="list-group-item">Total Milk - &nbsp;<strong>{{ $item['totalmilk'] }}</strong></li>

</ul>
<button type="button" class="btn btn-link">
<span class='glyphicon glyphicon getmonthmilkdetails'> More <i class="fas fa-arrow-circle-right"></i> </span>
</button>
</div>
</div>
@endforeach

$(document).on('click', '#getmonthmilkdetails', function(E) {
var getmonthnameforajax = e.currentTarget.closest('.card').querySelector('.monthnameforcard').textContent;
alert(getmonthnameforajax);
$.ajax({
type: 'post',
url: '/getmonthmilkdetails',
data: {
'_token'            : $('input[name=_token]').val(),
'monthname'         : getmonthnameforajax,
},
success: function(data) {

}
});

});